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

您无法使用OnQueryLoadListener设置display: none;动画，但如果您已知道新的高度目标值，则可以为高度值设置动画 - 您可以使用{{1}将隐藏元素设置为0因此，在click元素之前不会看到任何隐藏元素，如果您更喜欢使用CSS3制作动画，那么您可以使用新类作为新的高度值并使用.toggleClass() JQuery函数。

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

HTML＆amp; JQuery的：

display: block;

CSS：

overflow: hidden;

小提琴：http://jsfiddle.net/coyxhprp/

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

1 个答案: