为什么只有chrome(也许还有safari)能很好地处理过渡(高度、宽度)

Question

我有一个文本区域，它可以平滑地拉伸（使高度更大）：

<style type="text/css">
textarea {
  height:20px;
  width:170px;
  transition-property: all 0.2s linear; /* PS: I don't want to write all prefixes in this question */
}
  textarea:focus {
  height:30px;
}
</style>
<div style="overflow:hidden;"><!--And some good styles-->
  <textarea style="resize:none;padding:10px;"></textarea>
</div>

所以，在chrome中，<div>可以平滑地拉伸（<textarea>也是，这是我想要的），但在opera和firefox中，<textarea>可以平滑地伸展，但<div>不能。

我试图将转换添加到<div>，但没有结果。。

有解决办法吗？（附言：我有一些想法可以用javascript解决它：只需在<div> onfocus中添加类，但我可以在没有js的情况下解决它吗？）

Answer 1

所以，我做到了：我只是在文本区域的焦点上向<div>添加类"active"，在模糊上：从<div>中删除类"active."。该类执行的所有转换，如

div {
  height: 20px;
  transition: all 0.2s linear;
}
div textarea {
  height: 10px;
  transition: all 0.2s linear;
}
div.active textarea {
  height:30px;
}
div.active {
  height:40px
}

它工作得很好。