[英]How can I fadeIn elements during a click event?
More specifically, I want to fade one by one my a
elements from my mobile-container
when the transition of the mobile-container
transitions stops when it's opened. 更具体地讲,我想通过我的一个褪色一个a
从我的元素mobile-container
时的过渡mobile-container
它打开时转换停止。 This website has exactly what I'm trying to achieve. 这个网站正是我想要达到的目标。
Here is a link to my codepen. 这是我的Codepen的链接。
Bellow is my code.. without the Sass and Jquery files because the indentation on stack overflow is killing me. 贝娄是我的代码..没有Sass和Jquery文件,因为堆栈溢出的缩进使我丧命。
Jade: 玉:
nav
a(id='brand') ecostudent
ul(class='main-navigation')
li
a lorem
li
a lorem
li
a lorem
li
a lorem
div(class='menu-wrapper')
div(class='line-menu top')
div(class='line-menu bottom')
div(class='mobile-container')
ul(class='mobile-navigation')
li
a lorem
li
a lorem
li
a lorem
li
a lorem
div(class='menu-closing-wrapper')
div(class='line-menu top')
div(class='line-menu bottom')
You can use transition-delay
combined with sass loops and completely avoid javascript: 您可以将transition-delay
与sass循环结合使用,完全避免使用javascript:
@for $i from 0 through 3
.mobile-container.active li:nth-child(#{$i})
transition-delay: 330ms + (100ms * $i) !important
You can use jquery plugin https://github.com/morr/jquery.appear/ to track elements when they appear and provide data animations based on it. 您可以使用jquery插件https://github.com/morr/jquery.appear/跟踪元素出现的时间,并根据其提供数据动画。
Eg You can give your element and attribute data-animated="fadeIn" and the plugin will do the rest. 例如,您可以将元素和属性设置为data-animated =“ fadeIn”,然后插件将完成其余工作。
The fastest way is probably just to loop through each list item and create a setTimeout for a fade-in. 最快的方法可能只是遍历每个列表项并为淡入创建一个setTimeout。 My jquery is a little rusty but something like this: 我的jquery有点生锈,但是像这样:
$('.mobile-navigation li').each(function(index,item) {
setTimeout( function(){$(item).fadeIn();}, index*100);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.