Javascript 设置窗体大小的动画

我想在用户第一次选择输入表单时设置其高度的动画。所以这个表格只有一行高，他们开始打字，它变成了大约10行高

首先，您要使用

来代替，通过这种方式，您可以操纵使用

行

属性显示的文本行数。就是

<textarea rows="10"></textarea>

focusin

事件处理程序将展开元素以显示10行文本。它还将清除折叠超时设置，以便在元素失去焦点后将显示更改为1行文本。折叠超时在

focusout

事件处理程序中设置

动画速度设置为

slow

，折叠超时设置为

200

ms，要扩展的文本行数为

10行

以下内容将初始化页面中的所有
textarea
元素：

$("textarea").expandable();

以下是“css唯一”的方法

只需在文本区域上使用：焦点选择器，并在聚焦状态下更改文本区域的高度

textarea{
    height:20px;
    width:150px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
}

textarea:focus{
    height:50px;
}

演示：
阅读jquery文档，它非常简单。元素。动画（细节）：也不要使用输入，使用文本区域。你能用关于CSS3动画当前状态的正确信息完成你的答案吗？这太棒了，正是我想要的。但是有没有一种简单的方法可以让表单在用户写过一次之后保持更大的尺寸呢？我还在学习jquery和javascript，但这听起来很简单。因此，我使用了与之前相同的css转换，但没有使用：focus，而是在触发.focus事件时使用它，我添加了一个类，它使文本区域更长？让css转换来制作动画？或者我必须单独使用jquery设置文本区域高度的动画？
textarea{
    height:20px;
    width:150px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
}

textarea:focus{
    height:50px;
}