[英]why css transition work with delay
因此,我使用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');
}
});
现在怎么说怎么说隐藏? 请帮助我:)喜欢在这里摆弄
所以,决定是如此简单! 需要打开其子项总和高度的列表。 正确的代码:
$('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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.