Question

我有一个充满文字的div。当单击不同的按钮并且div增大和缩小以容纳文本时，该文本会发生变化（正如您在使用CSS时通常所做的那样）。它有一个背景和一个边框，我想使用CSS3过渡让div通过一点动画平滑地增长和收缩。出于某种原因，我的代码不起作用。我写道：

div.div-in-question {
    margin: 0 auto;
    position: relative;
    padding: 0 50px;
    width: 600px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

它仍然像正常一样增长和缩小，没有动画或平滑度。

我根据我认为CSS3过渡的工作原理，制作了一个JSFiddle，我觉得它会起作用。

Answer 1

使用jQuery尝试这样的事情

JSIFFLDE

$("body").click(function(e){
    e.preventDefault();
    $("ul").append("<li>Another row</li>");
    $("ul li").slideDown();
});

修改

我已经添加了缓和＆＃34; easeOutBounce＆＃34;它看起来像从上层元素掉下来

JSFIDDLE

Answer 2

本作品

$(function(){
    $("body").click(function(e){
        e.preventDefault();
        $("<li>Another row</li>").appendTo("ul").hide().slideDown();
    });
});

Answer 3

不知道为什么，但我在这里创建了一个小样本动画协议，但它不能用于

 div.div-in-question{}

选择器，只是

.div-in-question{}

试试。

http://jsfiddle.net/plushyObject/d06ynxy5/

当div内容改变并且div增长时，CSS3转换

3 个答案: