内容更改后动画块调整大小的正确方法是什么

Question

我有一个包含可见文本和隐藏文本的块。隐藏文本变为可见后，主块将改变大小。为这种重新调整大小设置动画的正确方法是什么？是否可以为此使用纯 css 解决方案？

.wrapper{
  padding: 10px}
.common{
  border: 1px solid #ccc;
  width: 300px;
  margin: 0 auto;
  padding: 10px;
  -moz-transition: max-height 2s;
} 
  p.foo{
    display: none;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="common">
    <button onclick="$('p.foo').toggle()">Click me</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod magnam nulla ex aperiam, unde id ea amet tenetur magni harum quibusdam nihil ipsam sed natus excepturi impedit iure sapiente molestias repudiandae a iusto possimus, modi, molestiae saepe ab! Obcaecati odit deserunt alias consectetur perspiciatis, possimus</p>
    <p class="foo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod magnam nulla ex aperiam, unde id ea amet tenetur magni harum quibusdam nihil ipsam sed natus excepturi impedit iure sapiente molestias repudiandae a iusto possimus, modi, molestiae saepe ab! Obcaecati odit deserunt alias consectetur perspiciatis, possimus</p>
  </div>
  
</div>

隐藏文本的块部分大小始终相同且可知
可见块的大小未知

Answer 1

您无法使用 display: none; 到 display: block; 设置动画，但如果您已经知道新的高度目标值，则可以设置高度值的动画 - 您可以使用 [= 将隐藏元素设置为 0 14=] 所以在点击元素之前不会看到任何隐藏元素，如果您更喜欢使用 CSS3 制作动画，那么您可以使用新的 class 作为新的高度值并使用 .toggleClass() JQuery 函数。

我建议您不要将其用作内联...

HTML & JQuery:

<button onclick="$('p.foo').toggleClass('show')">Click me</button>

CSS:

p.foo
{
    height: 0;
    overflow: hidden;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

p.foo.show
{
    height: 144px;
}

fiddle: http://jsfiddle.net/coyxhprp/

内容更改后动画块调整大小的正确方法是什么

What is the proper way to animate block resizing after its content changed

css

css-animations