Переход CSS на removeClass

Question

Я пытаюсь сделать эффект слайда для div с css-переходами, но, по-видимому, переход работает только при закрытии.

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

Как сказал: ДИВ открываются и закрываются, но переход осуществляется только близко .. .любое предложение?

Answer 1

Я думаю, что вы используете переход на максимальную высоту, потому что вы не знаете точно окончательной высоты вашего контента, верно?

В любом случае, вы просто не можете анимировать от максимальной высоты: от 0 до максимальной высоты равно огромному значению. Возвращаясь назад, возможно, потому что высота известна.

Вообще, для этого типа анимации я использую somenthing как это.

• Я обернуть содержимое в DIV с height: 0; и overflow: hidden;
• По щелчку, я использую JQuery, чтобы вычислить точно высоту DIV контента с $('selector').height();
• Использование JQuery, чтобы установить это значение на родителя мой контент $('wrapper').height(value);

Стиль перехода CSS сделает анимационный трюк.