为什么CSS过渡会延迟工作

Question

So, I touch css property 'max-height' of me categories list using js. In first case when list is not full opened transition works fine. In second case when I need to hide some part of list, css transition start like with delay.

    .category_list>ul {
display: inline-block; 
text-align:left; 
overflow: hidden; 
word-wrap: break-word; 
width: 170px; 
transition: max-height 1s ease-out; 
-webkit-transition: max-height 1s ease-out; 
-moz-transition: max-height 1s ease-out; 
-o-transition: max-height 1s ease-out;
}

$('body').on('click','.full_category_list>span',function(){
    if ($(this).text()=='open list') {
        $(this).parent().parent().find('ul').stop().css('max-height','500px');
        $(this).text('hide list');
    } else {
        var ul = $(this).parent().parent().find('ul');
        console.log($(ul).attr('data-height'));
        $(ul).stop().css('max-height',$(ul).attr('data-height'));
        $(this).text('open list');
    }
});

How to say to list hide right now? Please help me :) Lik to fiddle here fiddle

Answer 1

So, decision is so simple! Need to open list on its childrens sum height. Right code:

    $('body').on('click','.full_category_list>span',function(){
if ($(this).text()=='open list') {
    var ul = $(this).parent().parent().find('ul');
    $(ul).stop().css('max-height',$(ul).attr('data-fullheight'));
    $(this).text('hide list');
} else {
    var ul = $(this).parent().parent().find('ul');
    $(ul).stop().css('max-height',$(ul).attr('data-height'));
    $(this).text('open list');
}

});

And lik to updated fiddle fiddle

Thanks @vel !!!

Answer 2

Updated fiddle - no need JS!!!

Fix delay solution:

Put cubic-bezier(0, 1, 0, 1) transition function for element.

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}