Javascript css转换为什么会延迟工作

因此，我使用js触摸我的类别列表的css属性“最大高度”。 在第一种情况下，当列表未完全打开时，转换工作正常。 在第二种情况下，当我需要隐藏列表的某些部分时，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');
    }
});

如何说现在列表隐藏？请帮帮我：） 喜欢在这里摆弄

所以，决定很简单！ 需要打开其孩子的身高总和列表。右代码：

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

}))

我喜欢小提琴

谢谢@vel

-不需要JS

修复延迟解决方案：

将三次贝塞尔（0，1，0，1）变换函数用于元素

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

---

你能提供一个小提琴链接吗？是的，试着用

transition:max height 1s ease 0s改变你的放松类型$（this.parent（）.parent（）.find（'ul'）.stop（）.css（'max-height'，'200px'）；确切地需要打开其孩子的身高总和列表。谢谢你@vel！