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

Posted 2023-03-06

【中文标题】当 div 内容改变和 div 增长时 CSS3 过渡

【英文标题】：CSS3 transitions when div content changes and div grows

【发布时间】：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 过渡的工作方式来工作。

【问题讨论】：

您无法转换自动高度 - 您必须设置特定高度才能进行转换。

看看这个答案，看看是否有帮助：***.com/questions/13938460/…

【参考方案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