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

Solution

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.