0
我试图让不透明度过渡时序延迟:CSS3过渡延迟
$('.wrapper').children('div').each(function(){
$(this).removeClass('hidden').addClass('visible');
});
现在,他们一下子消失,我想连续褪色。
只用css可以吗?
我试图让不透明度过渡时序延迟:CSS3过渡延迟
$('.wrapper').children('div').each(function(){
$(this).removeClass('hidden').addClass('visible');
});
现在,他们一下子消失,我想连续褪色。
只用css可以吗?
是的,这是可能的。
您可以使用转换延迟特性: http://www.w3schools.com/cssref/css3_pr_transition-delay.asp
HTML:
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
CSS:
.first {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.second {
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1s;
}
.third {
-webkit-transition-delay: 2s;
-moz-transition-delay: 2s;
-o-transition-delay: 2s;
-ms-transition-delay: 2s;
transition-delay: 2s;
}
佛[R它n个儿童工作,你必须使用JavaScript像这样:
的Javascript:
$('.wrapper').children('div').each(function(index, value) {
.css('-webkit-transition-delay', index + 's')
.css('-moz-transition-delay', index + 's')
.css('-ms-transition-delay', index + 's')
.css('-o-transition-delay', index + 's')
.css('transition-delay', index + 's');
});
这可行,但如果我有未知数量的元素呢? – Toniq
有延迟在CSS过渡的属性,但你触发代码中每个元素的相同行为。至少你需要能够给每个元素一个不同的类名,你能做到吗? –