How can I fadeIn elements during a click event?

Question

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. This website has exactly what I'm trying to achieve.

Here is a link to my codepen.

Bellow is my code.. without the Sass and Jquery files because the indentation on stack overflow is killing me.

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

You can use transition-delay combined with sass loops and completely avoid javascript:

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

Check this fork of your codepen.

Answer 2

You can use jquery plugin https://github.com/morr/jquery.appear/ to track elements when they appear and provide data animations based on it.

Eg You can give your element and attribute data-animated="fadeIn" and the plugin will do the rest.

Answer 3

The fastest way is probably just to loop through each list item and create a setTimeout for a fade-in. My jquery is a little rusty but something like this:

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