Textarea附加行过渡效果

Question

我有一个代码可以向我的#moo textarea添加额外的行：

$('#moo').focus(function(){
    $(this).attr('rows', '4');
});

所以当我关注时，textarea会变得更高。有什么方法可以动画吗？ （css过渡似乎没有失败）。

Answer 1

使用height和transition css属性。

textarea {
  height: 50px;
  transition: 1s
}

<textarea onclick="event.target.style.height=120px">