Question

更具体地说，当a转换的转换在打开时停止时，我希望逐渐淡出mobile-container个mobile-container元素。 This网站正是我想要实现的目标。

Here是指向我的codepen的链接。

Bellow是我的代码..没有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')

Answer 1

您可以将transition-delay与sass循环结合使用，完全避免使用javascript：

@for $i from 0 through 3
  .mobile-container.active li:nth-child(#{$i})
    transition-delay: 330ms + (100ms * $i) !important

检查您的代码簿的fork。

Answer 2

您可以使用jquery插件https://github.com/morr/jquery.appear/在元素出现时跟踪它们，并根据它提供数据动画。

E.g。你可以给你的元素和属性data-animated =“fadeIn”，插件将完成其余的工作。

Answer 3

最快的方法可能只是遍历每个列表项并为淡入创建setTimeout。我的jquery有点生疏，但是像这样：

$('.mobile-navigation li').each(function(index,item) {
    setTimeout( function(){$(item).fadeIn();}, index*100);
});

如何在点击事件期间淡化元素？

3 个答案: