css - React Native 中的动画字段宽度

Question

我有 2 个文本输入，每个都带有 flex: 1。当我关注其中一个时，我将其放大-> flex: 1 -> flex: 2。

谁能给我一个如何为这个宽度变化添加动画的例子？

<TextInput style={{flex: 1'}} onFocus={() => this.makeBigger()}/>
<TextInput style={{flex: 1'}}/>

// the makeBigger will make the style look like this:
<TextInput style={{flex: 2'}} onFocus={() => this.makeBigger()}/>
<TextInput style={{flex: 1'}}/>

Answer 1

这可能是多余的，但不是设置flexwhich 是 flex 属性的集合flex-grow,flex-shrink和flex-basis. 我建议您flex-grow改为明确设置。

我要做的是给他们一个类名，然后让 onFocus 事件更改类名。然后你可以将它添加到你的 CSS 中：

.baseClass {
  transition: 0.2s all ease-in-out;
}
.shrinkClass {
  flex-grow: 1;
}
.growClass {
  flex-grow: 2;
}