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;
}

联署材料：

    $('.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打开和关闭，但是转换只对close...any建议执行吗？

Answer 1

我认为你使用的是最大高度的转换，因为你不知道你的内容的最终高度是多少，对吗？

无论如何，你根本不能从最大高度:0到最大高度等于一个巨大的值。相反，回来是可能的，因为身高是已知的。

通常，对于这种类型的动画，我使用这样的命名方式。

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

CSS转换风格将完成动画技巧。