如何在单击事件期间淡入元素？答案

【问题标题】：How can I fadeIn elements during a click event?如何在单击事件期间淡入元素？
【发布时间】：2018-04-27 21:13:50
【问题描述】：

更具体地说，当mobile-container 过渡在打开时停止时，我想从我的mobile-container 中一个一个地淡化我的a 元素。 This 网站正是我想要实现的目标。

Here 是我的 codepen 的链接。

Bellow 是我的代码.. 没有 Sass 和 Jquery 文件，因为堆栈溢出的缩进正在杀死我。

玉：

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')

【问题讨论】：

标签： javascript jquery html css pug

【解决方案1】：

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

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

检查您的 codepen 的 fork。

【讨论】：

是的！这太酷了..您知道如何使用您的解决方案同时淡入和滑下 li 元素吗？
@Marius 只需在 li 项上添加一个变换属性（我只添加了不透明度）。
我在 mobile-container 的 li 上添加了 transform: translateY(-10px) 并在 mobile-container.active 的 li 上添加了 transform: translateY(0) 但唯一改变的是li 元素的初始位置。它们不会滑落。编辑：我设法通过在转换结束时添加 !important 来使其工作： translateY(0)

【解决方案2】：

您可以使用 jquery 插件https://github.com/morr/jquery.appear/ 来跟踪元素何时出现并提供基于它的数据动画。

例如你可以给你的元素和属性 data-animated="fadeIn" 和插件会做剩下的。

【讨论】：

【解决方案3】：

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

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

【讨论】：