更改内容时动画高度css3答案

【问题标题】：animate height when content is changed css3更改内容时动画高度css3
【发布时间】：2015-01-02 19:37:24
【问题描述】：

当 div 的内容发生变化（通过脚本和 \ 或 css）时，有没有办法为 div 的高度设置动画？

div {
  width:100px;
  }

#b {
  display:none;
  }

.wrapper.switch #a {
  display:none;
  }

.wrapper.switch #b {
  display:block;
  }

<div class="wrapper">
  <div id="a">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    </div>
  <div id="b">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    </div>
  
  <button onclick="document.querySelector('.wrapper').classList.toggle('switch');">swich</button>

【问题讨论】：

webkit-transition height for a div with a dynamic changing height based on content?的可能重复
虽然问题可能相似，但我不明白为什么它会与该问题重复。

标签： javascript html css

【解决方案1】：

我认为这个脚本会对你有所帮助：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>stackoverflow</title>
<style type="text/css">
    .box{
        width: 350px;
        padding:20px;
        border: 1px solid #ccc;

    }
  .box p{
        margin: 0;
        padding-top: 20px;
    }
    .box p:first-child{
        padding-top: 0;
    }

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Defining the function
    function animateHeight(){
        var newHeight = $(".box-inner").height();
        $(".box").animate({
            height: newHeight,
        }, 500);
    }
    $(".load-more").click(function(){
        // Setting the initial height of the box
        $(".box").height($(".box-inner").height());

        // Appending box with new content and animate the height
        var newContent = "<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>";
        $(".box-inner").append(newContent);
        animateHeight();
    });
});
</script>
</head>
<body>
<button class="load-more">Switch</button>
<p>Height Changes Whenever you click</p>
<div class="box">
    <div class="box-inner">
        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
        </p>
    </div>
</div>
</body>
</html>

【讨论】：

谢谢.. 我只询问了 css3 解决方案，但谢谢！
你是用“script and \ or css”写的。这就是我提供脚本的原因。但不客气……享受吧……
内容被脚本修改了。我正在寻找纯 css3 动画。