可以将 CSS 转换与 textarea 行值一起使用吗？

Question

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

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

state = {
  rows: 1
}

...

<textarea 
   ...
   rows={this.state.rows ? this.state.rows : 1}
   onFocus={this.onFocus}
   ...
/>

onFocus 函数将行状态更改为 5，从而扩展了 textarea。

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

我尝试过的所有方法都不起作用，例如：

textarea#content {
  transition: all 2s ease-in-out;
}

...所以我的问题是 - 不能以这种方式使用 CSS 过渡吗？我进行了一些谷歌搜索，但找不到任何答案，这让我相信它不是，但我只是想在我开始以另一种方式实现这一目标之前确定一下。

Answer 1

这里不能说 React 是如何参与其中的，但是要让 transition 工作，被转换的 CSS 属性必须为其设置一个默认值。您通过更改 rows 来间接影响 height 属性，但您实际上并未指定要更改 height，因此您无法转换 height 如果你只是间接地改变它。此外，没有 CSS rows 属性，因此转换它也没有运气。

解决方案是首先不使用rows 间接设置height。直接设置height，并在CSS中为height设置一个默认值。

而且，您甚至真的不需要 JavaScript 来执行此操作：

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 */
}

<textarea></textarea>