Как я могу fadeIn элементы во время события клика? - PullRequest
Новая
       14

Как я могу fadeIn элементы во время события клика?

0 голосов
/ 28 апреля 2018

Точнее говоря, я хочу постепенно исчезать мои элементы a из моих mobile-container, когда переход переходов mobile-container останавливается, когда он открыт. Этот сайт имеет именно то, чего я пытаюсь достичь.

Здесь - ссылка на мой кодовый блок.

Ниже - мой код ... без файлов 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')

Ответы [ 3 ]

0 голосов
/ 28 апреля 2018

Самый быстрый способ, вероятно, состоит в том, чтобы просто пройтись по каждому элементу списка и создать setTimeout для постепенного появления. Мой jquery немного ржавый, но примерно такой: 

$('.mobile-navigation li').each(function(index,item) {
    setTimeout( function(){$(item).fadeIn();}, index*100);
});
0 голосов
/ 28 апреля 2018

Вы можете использовать transition-delay в сочетании с циклами sass и полностью избегать JavaScript: 

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

Проверьте эту вилку вашего кода.

0 голосов
/ 28 апреля 2018

Вы можете использовать плагин jquery https://github.com/morr/jquery.appear/, чтобы отслеживать элементы, когда они появляются, и предоставлять анимацию данных на их основе.

например. Вы можете указать свой элемент и атрибут data-animated = "fadeIn", а плагин сделает все остальное.

...