Question

我使用了CSS-transitions，并遇到了一些奇怪的事情，为max-height添加了从某个值（例如14px）到none的转换。

根本没有动画，隐藏的元素会立即显示和消失。

我可以看到一个问题，因为none没有高度，很难将差异计算为动画。将none更改为实际值（例如120px）可按预期工作。

有没有办法让这个例子工作，而不改变HTML结构？

$("div").click(function(){
  $(this).toggleClass("unfold");
})

div {
    max-height: 14px;
    overflow: hidden;
    cursor: pointer;
    
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

div.unfold {
    max-height:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
First-line<br />
Second<br />
Third<br />
Fourth<br />
More<br />More<br />More<br />More<br />More<br />More<br />More<br />More<br />
</div>

Answer 1

通过动画高度，如果你使用jquery它有一个很好的方法叫做slideDown，它可以做如下的好动画。

$("button").click(function(){
  $('div').slideToggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Click me to animate</button>
<div style="display:none">
First-line<br />
Second<br />
Third<br />
Fourth<br />
</div>

Answer 2

问题是max-height: none CSS属性。

我通过使用JS解决方案并保存元素的scrollHeight来管理它。这是元素的实际高度，不考虑max-height CSS属性。

＆＃13;

var INITIAL_MAX_HEIGHT = 14;

$("div").each(function() {
  var $element = $(this);
  var scrollHeight = $element.prop("scrollHeight");
  $element.css({"max-height": INITIAL_MAX_HEIGHT});

  $element.click(function(){
    var height = $element.height();
    if (height <= INITIAL_MAX_HEIGHT) {
      $element.animate({"max-height": scrollHeight}, 1000);
    } else {
      $element.animate({"max-height": INITIAL_MAX_HEIGHT}, 1000);
    }
  });
});

＆＃13;

div {
    overflow: hidden;
    cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
First-line<br />
Second<br />
Third<br />
Fourth<br />
More<br />More<br />More<br />More<br />More<br />More<br />More<br />More<br />
</div>

＆＃13;

从值到无转换的最大高度动画

2 个答案: