我尝试使用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打开和关闭,但转换仅在关闭时执行...任何建议?
答案 0 :(得分:0)
我认为您正在使用max-height的转换,因为您不知道内容的确切最终高度,对吗?
无论如何,你只能从max-height动画:0到max-height等于巨大的值。相反,可能会回来,因为高度是已知的。
一般来说,对于这种类型的动画,我会像这样使用somenthing。
height: 0;
和overflow: hidden;
$('selector').height();
$('wrapper').height(value);
CSS过渡样式将执行动画技巧。