在點擊事件期間如何淡入元素？

Question

更具體地講，我想通過我的一個褪色一個a從我的元素mobile-container時的過渡mobile-container它打開時轉換停止。 這個網站正是我想要達到的目標。

這是我的Codepen的鏈接。

貝婁是我的代碼..沒有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')

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

檢查這個叉子的codepen的。

Answer 2

您可以使用jquery插件https://github.com/morr/jquery.appear/跟蹤元素出現的時間，並根據其提供數據動畫。

例如，您可以將元素和屬性設置為data-animated =“ fadeIn”，然后插件將完成其余工作。

Answer 3

最快的方法可能只是遍歷每個列表項並為淡入創建一個setTimeout。 我的jquery有點生銹，但是像這樣：

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