When removing form input help text, it's causing elements underneath to twitch/flicker

[jmca]

Version

3.1.0

Environment

Chrome, Safari

Reproduction link

https://codesandbox.io/s/40k3zv92q7

Steps to reproduce

• Create three vertical form items with the top element as an Input.
• Add help text to that Input
• Toggle that input's help text (using state in this case)

What is expected?

The form item should be the same height regardless of help text.

What is actually happening?

When the help text is removed, the form item's height is not held causing all elements below to shift up for a quick seconds cause a perceived twitch/flicker.

[dengfuping]

@jmca In fact, when the help text is just one line, the space between two form items is enough for the help text. For the help text with multiple lines, it's unavoidable. Further to the demo in the docs.

[jmca]

I'm not sure why it doesn't do it on the demo page. Maybe it's a different version or custom style is applied. Check out the sandbox link (https://codesandbox.io/s/40k3zv92q7), the twitching is apparent. I think it has something to do with how the animation transition is collapsing the text.

[benjycui]

The CSS animation is too complicated, could you help @afc163

[yesmeck]

@jljsj33 Take a look, introduced in 22ef7d1

[jljsj33]

中文描述下。。。。

[yesmeck]

你看上面的 codepen 链接，helper 消息消失的时候下面的输入框会抖一下。

[yesmeck]

我看了下是因为 22ef7d1 里引入的动画导致的。

[jljsj33]

感觉是时间没同步。。。

[jljsj33]

我看下。。。

[jljsj33]

22ef7d1#diff-51de536edf29809d26f0ccfab96f81fcR72

CSS 不是同一个时间轴的问题。。。