Question

所以，我触摸css属性＆＃39; max-height＆＃39;我使用js的类别列表。在第一种情况下，当列表未完全打开时，转换工作正常。在第二种情况下，当我需要隐藏列表的某些部分时，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');
    }
});

怎么说列表隐藏吧？请帮我：） Lik在这里摆弄fiddle

Answer 1

所以，决定是如此简单！需要打开其子女的总和高度列表。正确的代码：

projectDirectory

}）;

并喜欢更新的小提琴fiddle

谢谢@vel !!!

Answer 2

Updated fiddle - 不需要JS !!!

修复延迟解决方案：

将cubic-bezier（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;
}

为什么css过渡工作有延迟

2 个答案: