test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-11 10:05:07 +08:00
Code Issues Actions 186 Packages Projects Releases Wiki Activity

add form explain animate (#7172)

Browse Source
This commit is contained in:
jiang 2017-08-11 17:05:25 +08:00 committed by 偏右
parent 33e822b0c8
commit 22ef7d1147
2 changed files with 47 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/form/FormItem.tsx
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import Animate from 'rc-animate';
import PureRenderMixin from 'rc-util/lib/PureRenderMixin'; import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
import Row from '../grid/row'; import Row from '../grid/row';
import Col, { ColProps } from '../grid/col'; import Col, { ColProps } from '../grid/col';
@ -124,11 +125,15 @@ export default class FormItem extends React.Component<FormItemProps, any> {
renderHelp() { renderHelp() {
const prefixCls = this.props.prefixCls; const prefixCls = this.props.prefixCls;
const help = this.getHelpMsg(); const help = this.getHelpMsg();
return help ? ( const children = help ? (
<div className={`${prefixCls}-explain`} key="help"> <div className={`${prefixCls}-explain`} key="help">
{help} {help}
</div> </div>
) : null; ) : null;
return (
<Animate transitionName="show-help" component="" transitionAppear key="help">
{children}
</Animate>);
} }
renderExtra() { renderExtra() {

38
components/form/style/index.less
View File

@ -69,6 +69,7 @@ input[type="checkbox"] {
margin-bottom: @form-item-margin-bottom; margin-bottom: @form-item-margin-bottom;
color: @text-color; color: @text-color;
vertical-align: top; vertical-align: top;
transition: margin .15s steps(1);
// nested FormItem // nested FormItem
& > &, & > &,
@ -84,6 +85,7 @@ input[type="checkbox"] {
&-with-help { &-with-help {
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base; margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
transition: none;
} }
&-label { &-label {
@ -125,6 +127,7 @@ input[type="checkbox"] {
.@{form-prefix-cls}-extra { .@{form-prefix-cls}-extra {
color: @text-color-secondary; color: @text-color-secondary;
line-height: 1.5; line-height: 1.5;
transition: color .15s @ease-out;
} }
.@{form-prefix-cls}-extra { .@{form-prefix-cls}-extra {
@ -286,8 +289,9 @@ form {
display: none; display: none;
} }
} }
.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label, .@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
// when labelCol is 24, it is a vertical form // when labelCol is 24, it is a vertical form
.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label, .@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label { .@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
.make-vertical-layout(); .make-vertical-layout();
@ -515,6 +519,38 @@ form {
} }
} }
.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) {
.make-motion(@className, @keyframeName, @duration);
.@{className}-enter,
.@{className}-appear {
opacity: 0;
animation-timing-function: @ease-in-out;
}
.@{className}-leave {
animation-timing-function: @ease-in-out;
}
}
.show-help-motion(show-help, antShowHelp, 0.15s);
@keyframes antShowHelpIn {
0% {
opacity: 0;
transform: translateY(-5px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes antShowHelpOut {
to {
opacity: 0;
transform: translateY(-5px);
}
}
// need there different zoom animation // need there different zoom animation
// otherwise won't trigger anim // otherwise won't trigger anim
@keyframes diffZoomIn1 { @keyframes diffZoomIn1 {