Question

多年来，我一直在开发网站，这种情况以前从未出现过，我不确定我尝试做的事情是否可能。

我有一个带有React的{{1}}组件。它的初始状态以1行的高度呈现，如下所示：

textarea

state = { rows: 1 } ... <textarea ... rows={this.state.rows ? this.state.rows : 1} onFocus={this.onFocus} ... />函数将行状态更改为5，从而扩展了onFocus。

这很好用，但是我现在正尝试将CSS过渡添加到textarea中，因此它可以很好地扩展而不是立即扩展。

例如，我尝试的所有方法均无效：

textarea

...所以我的问题是-这样无法使用CSS转换吗？我做了一些谷歌搜索，找不到任何答案，这使我相信不是，但是我只是想确保在开始以另一种方式实现之前。

Answer 1

这里不能说说React如何参与其中，但是要使transition起作用，要转换的CSS属性必须为其设置默认值。您正在通过更改height来间接地{strong>影响rows，因此您不能如果您仅间接更改height，请转换它。另外，也没有CSS height属性，因此也无法进行过渡。

解决方案是首先不要将rows间接设置为height。直接设置rows并在CSS中为height设置默认值。

而且，您实际上甚至不需要JavaScript即可：

height

textarea {
 height:1em; /* Initial value required for transitions to work */
 transition:height 1s ease-in-out; /* configure the transition*/
}

/* Style to be applied automatically when the textarea recievs the focus */
textarea:focus {
  height:5em; /* A change in this property will trigger the transition */
}

可以将CSS过渡与textarea行值一起使用吗？

1 个答案: