Question

我使用css在div中拥有动画（使用过渡）。 div的内容是动态的（可以是1行或多行）。

我有2个课程，我切换到动画效果：

.class1{
    max-height: 200px;
}
.class2{
    max-height: 0;
}

当我在div中只有1行时出现问题，所以在1行消失之前会有“延迟”（因为高度从200px变为0而实际大小只有30px）。

我尝试使用element.style.maxHeight = elem.offsetHeight + "px"设置max-height大小，但它不起作用，所以我想更改类（class1或class2）中的max-height以适合实际大小

如何更改课程内容（我不希望在我的div中有"style = max-height: 100px"）？

Answer 1

您可以将转场与height结合使用。不仅因为解决您的问题，还因为具有更好的性能，然后更改jQuery(document).ready(function() { jQuery('.click-me').on('click', function() { var $this = jQuery(this); if ($this.hasClass('show')) { jQuery(this).removeClass('show').addClass('hide'); } }); });。没有意义改变高度和使用CSS，在性能方面你可以使用JS，它是一样的。

我在jsfiddle为你做了一个例子，因为在这里似乎不起作用。

.hide {
  transform: translateY(-100%);
  z-index: -1;
}
.show {
  transform: translateX(0);
  z-index: 0;
}
.animate {
  transition: transform 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
  <div class="click-me animate show">
    <div>one line</div>
  </div>
</div>

testdb

更改样式类的内容

1 个答案: