removeClass

时间:2016-05-06 15:55:26

标签: jquery css3 css-transitions

我尝试使用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打开和关闭,但转换仅在关闭时执行...任何建议?

1 个答案:

答案 0 :(得分:0)

我认为您正在使用max-height的转换,因为您不知道内容的确切最终高度,对吗?

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

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

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

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