当 div 内容改变和 div 增长时 CSS3 过渡答案

【问题标题】：CSS3 transitions when div content changes and div grows当 div 内容改变和 div 增长时 CSS3 过渡
【发布时间】：2015-05-07 15:17:49
【问题描述】：

我有一个充满文本的 div。当点击不同的按钮时，该文本会发生变化，并且 div 会增长和缩小以适应文本（就像使用 CSS 时 div 通常会做的那样）。它有一个背景和一个边框，我想使用 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;
}

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

我已经创建了一个JSFiddle，我认为它会根据我认为 CSS3 过渡的工作方式来工作。

【问题讨论】：

您无法转换自动高度 - 您必须设置特定高度才能进行转换。
看看这个答案，看看是否有帮助：stackoverflow.com/questions/13938460/…

标签： html css css-transitions

【解决方案1】：

不知道为什么，但我在这里创建了一个小示例动画交易，但它不适用于那个

 div.div-in-question{}

选择器，只是

.div-in-question{}

试试看。

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

【讨论】：

是的，但是因为您正在指定 div 的新高度，所以这很有效。 div 没有动态增长。
玩它。这是用来说明问题的小提琴（对不起，一开始没看到你的）。 jsfiddle.net/plushyObject/d06ynxy5/2

【解决方案2】：

这个作品

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

【讨论】：

【解决方案3】：

用 jQuery 试试这样的东西

JSIFFLDE

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

编辑

我添加了缓动“easeOutBounce”所以它看起来像是从上层元素掉下来

JSFIDDLE

【讨论】：