javascript - 为什么 css transition 会延迟工作

Question

因此，我使用 js 触摸我的类别列表的 css 属性“max-height”。 在第一种情况下，当列表未完全打开时，转换工作正常。 在第二种情况下，当我需要隐藏列表的某些部分时，css 转换会像延迟一样开始。

    .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');
    }
});

怎么说现在列出隐藏？请帮我 :) 喜欢在这里摆弄fiddle

Answer 1

所以，决定就是这么简单! 需要打开其 child 的高度总和列表。正确的代码:

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

});

喜欢更新的 fiddle fiddle

谢谢@vel!!!