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的转换，因为您不知道内容的确切最终高度，对吗？

无论如何，你只能从max-height动画：0到max-height等于巨大的值。相反，可能会回来，因为高度是已知的。

一般来说，对于这种类型的动画，我会像这样使用somenthing。

我将内容封装在包含height: 0;和overflow: hidden;
点击后，我使用jQuery计算内容div的确切高度$('selector').height();
使用jQuery在我的内容$('wrapper').height(value);

CSS过渡样式将执行动画技巧。

removeClass

1 个答案: