removeClass上的CSS转换

Question

我试图用css转换为div制作一个幻灯片效果，但显然转换只在关闭时有效。

HTML:

<div class="slider closed" id="more-details"> Some content </div>

CSS：

.slider {
  overflow-y: hidden;
  transition-property: all;
  transition-duration: .8s;
  transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
}
.slider.closed {
  max-height: 0;
}
.slider.opened {
  max-height: 10000px;
}

JS:

    $('.read-more').on('click', function(e){
        e.preventDefault();
        $(this).toggle();
        $('#more-details').removeClass('closed').addClass('opened');
        $('#read-less').show();
   });
   $('.read-less').on('click', function(e){
        e.preventDefault();
        $('#more-details').addClass('closed').removeClass('opened');
        $('#read-more').toggle();
   });

如前所述：div打开和关闭，但转换仅在关闭时执行。。。有什么建议吗？

Answer 1

我认为您正在使用最大高度的转换，因为您不知道内容的最终高度，对吧？

无论如何，您根本无法从最大高度设置动画：0到最大高度等于一个巨大的值。相反，回来是可能的，因为高度是已知的。

一般来说，对于这种类型的动画，我会用这样的方式。

• 我用height: 0;和overflow: hidden;将内容包装在div中
• 点击后，我使用jQuery计算$('selector').height();内容div的确切高度
• 使用jQuery在我的内容$('wrapper').height(value);的父级上设置此值

CSS转换样式将完成动画技巧。