jquery - 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

我认为您在最大高度上使用过渡是因为您不知道内容的最终高度，对吧？

无论如何，您根本无法从 max-height:0 到 max-height 等于一个巨大的值的动画。相反，返回是可能的，因为高度是已知的。

通常，对于这种类型的动画，我会使用类似这样的东西。

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

CSS 过渡样式将实现动画效果。