动画形式大小答案

【问题标题】：Animating form size动画形式大小
【发布时间】：2013-03-10 09:55:34
【问题描述】：

我想在用户第一次选择输入表单时为其高度设置动画。所以表格只是说 1 行高，他们去输入它，它变成了大约 10 行高。

【问题讨论】：

阅读jquery文档，很简单。 element.animate(details):
也不要使用输入，使用文本区域

标签： javascript jquery forms css animation

【解决方案1】：

这是“仅使用 css”的方法。

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

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

textarea:focus{
    height:50px;
}

演示： http://jsfiddle.net/NHZzt/

【讨论】：

您能否使用有关 CSS3 动画当前状态的正确信息来完成您的答案？
这太棒了，正是我所追求的。但是有没有一种简单的方法可以让用户在表单中写入一次后保持较大的尺寸？
我还在学习 jquery 和 javascript，但这听起来很简单。因此，我使用与您之前相同的 CSS 转换，但不是使用 :focus，而是在触发 .focus 事件时添加一个类，使文本区域更长？让css转换做动画？还是我必须单独使用 jquery 为文本区域的高度设置动画？

【解决方案2】：

首先您想使用<textarea/>，这样您就可以控制rows 属性显示的文本行数。也就是说，

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

显示一个 10 行文本的元素。

关于动画，您可以使用.animate() 方法进行平滑过渡，同时展开和折叠文本行数。

为了方便使用，我将它封装在一个 jQuery 插件中。

$.fn.expandable = function(){
    return this.each(function(){
        var $self = $(this);
        var isExpanded = false;
        var collapseTimeout;
        $self.on({
            focusin: function(evt) {
                if (isExpanded || evt.keyCode < 46 && evt.keyCode != 8 && evt.keyCode != 32) 
                    return true;
                isExpanded = true;
                clearTimeout(collapseTimeout);
                $self.stop(true).animate({
                    rows: 10
                }, "slow");
            },
            focusout: function() {
                collapseTimeout = setTimeout(function(){
                    $self.stop(true).animate({
                        rows: 1
                    }, "slow");
                }, 200);
                isExpanded = false;
            }
        });
    });
};

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

动画速度设置为slow，折叠超时设置为200毫秒，要展开的文本行数为10文本行数。

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

$("textarea").expandable();

You can see a live example here.

【讨论】：