javascript - 动画形式大小

Question

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

Answer 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/

Answer 2

首先，您想使用 a<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，折叠超时设置为200ms ，要展开的文本10行数为文本行数。

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

$("textarea").expandable();

你可以在这里看到一个活生生的例子。