Javascript 是否可以将CSS转换与textarea行值一起使用？

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

我有一个带有

textarea

的

React

组件。它的初始状态以1行的高度呈现，如下所示：

state = {
  rows: 1
}

...

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

---

…所以我的问题是-不可能以这种方式使用CSS转换吗？我在谷歌上搜索了一下，没有找到任何答案，这让我相信不是这样的，但我只是想在我开始用另一种方法实现这一点之前确定一下。

不能说这里可能涉及到什么反应，但要使

转换

起作用，正在转换的CSS属性必须为其设置一个默认值。通过更改

行

，可以间接影响

高度

属性，但实际上并没有指定要更改

高度

，因此，如果只是间接更改

高度

，则无法转换该高度。而且，没有CSS

行

属性，因此在转换时也没有运气

解决方法是首先不要间接地用

行设置
高度
。直接设置
高度
，并在CSS中为
高度设置默认值

而且，您甚至不需要JavaScript来实现这一点：


textarea{
高度：1em；/*过渡到工作所需的初始值*/
过渡：高度1s缓进缓出；/*配置过渡*/
}
/*文本区域接收焦点时自动应用的样式*/
文本区域：焦点{
高度：5em；/*此属性中的更改将触发转换*/
}
无法说明此处可能涉及到的React，但要使
转换
起作用，正在转换的CSS属性必须为其设置默认值。通过更改
行
，可以间接影响
高度
属性，但实际上并没有指定要更改
高度
，因此，如果只是间接更改
高度
，则无法转换该高度。而且，没有CSS
行
属性，因此在转换时也没有运气

解决方法是首先不要间接地用
行设置
高度
。直接设置
高度
，并在CSS中为
高度设置默认值

而且，您甚至不需要JavaScript来实现这一点：


textarea{
高度：1em；/*过渡到工作所需的初始值*/
过渡：高度1s缓进缓出；/*配置过渡*/
}
/*文本区域接收焦点时自动应用的样式*/
文本区域：焦点{
高度：5em；/*此属性中的更改将触发转换*/
}
我试过的所有东西都不管用，你试过了吗？与其试着在行上做某种转换，为什么不在高度上工作？@ScottMarcus
转换：所有2个都很容易输入输出-对一个人不起作用@姆瓦伦：如果我不能这样做，那将是我的下一步行动。但我现在很好奇，是否真的可以这样做，因为我以前从未遇到过这种情况。我尝试过的一切都不起作用。你尝试过的是什么？与其尝试在行上进行某种转换，为什么不在高度上进行转换？@ScottMarcus
transition:all 2s ease in out-对一个人不起作用@姆瓦伦：如果我不能这样做，那将是我的下一步行动。但我现在很好奇，是否真的可以这样做，因为我以前从未遇到过这样的情况。是的，这就是我的猜测。遗憾的是，它不能像这样使用，因为那样会很好！谢谢你的反馈，不客气。别忘了投票，并标上“答案”。祝你好运。这对像排这样的东西有用吗？我认为转换在基于整数的属性上不起作用。@JudeDesir正如我所说，它在
行
上不起作用，因为
行
不是CSS属性。但是，转换将对任何CSS属性值起作用，这些属性值可以计算为有一个起始值和结束值-整值或分数值都可以。是的，这就是我猜测的。遗憾的是，它不能像这样使用，因为那样会很好！谢谢你的反馈，不客气。别忘了投票，并标上“答案”。祝你好运。这对像排这样的东西有用吗？我认为转换在基于整数的属性上不起作用。@JudeDesir正如我所说，它在
行
上不起作用，因为
行
不是CSS属性。但是，转换将对任何CSS属性值起作用，这些属性值可以计算为有一个起始值和结束值——整值或分数值都可以。
textarea#content {
  transition: all 2s ease-in-out;
}