diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
index 1f44d856bbc3..c2bf155fe473 100644
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@@ -55,7 +55,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
 
   context: FormItemContext;
 
-  state = { helpShow: false };
+  helpShow = false;
 
   componentDidMount() {
     warning(
@@ -124,7 +124,10 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   }
 
   onHelpAnimEnd = (_key: string, helpShow: boolean) => {
-    this.setState({ helpShow });
+    this.helpShow = helpShow;
+    if (!helpShow) {
+      this.setState({});
+    }
   }
 
   renderHelp() {
@@ -135,6 +138,9 @@ export default class FormItem extends React.Component<FormItemProps, any> {
         {help}
       </div>
     ) : null;
+    if (children) {
+      this.helpShow = !!children;
+    }
     return (
       <Animate
         transitionName="show-help"
@@ -306,11 +312,10 @@ export default class FormItem extends React.Component<FormItemProps, any> {
     const style = props.style;
     const itemClassName = {
       [`${prefixCls}-item`]: true,
-      [`${prefixCls}-item-with-help`]: !!this.getHelpMsg() || this.state.helpShow,
+      [`${prefixCls}-item-with-help`]: this.helpShow,
       [`${prefixCls}-item-no-colon`]: !props.colon,
       [`${props.className}`]: !!props.className,
     };
-
     return (
       <Row className={classNames(itemClassName)} style={style}>
         {children}
diff --git a/components/form/style/index.less b/components/form/style/index.less
index 77effde5639e..0524364c0091 100644
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@@ -132,8 +132,9 @@ input[type="checkbox"] {
 .@{form-prefix-cls}-extra {
   color: @text-color-secondary;
   line-height: @line-height-base;
-  transition: color .15s @ease-out;
+  transition: color .3s @ease-out; // sync input color transition
   margin-top: @form-help-margin-top;
+  clear: both;
 }
 
 .@{form-prefix-cls}-extra {
@@ -576,7 +577,7 @@ form {
   }
 }
 
-.show-help-motion(show-help, antShowHelp, 0.15s);
+.show-help-motion(show-help, antShowHelp, 0.3s);
 
 @keyframes antShowHelpIn {
   0% {