Анимация ионного скользящего списка

В настоящее время я использую некоторые анимации с моим скользящим ионным списком, такие как скольжение слева направо и исчезновение контента, как в этом уроке. https://www.joshmorony.com/how-to-create-animations-with-css-in-ionic/

@-webkit-keyframes animateInPrimary {
  0% {
    -webkit-transform: translate3d(-100%,0,0);
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
  }
}

@-webkit-keyframes animateInSecondary{

  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animate-in-primary {
    -webkit-animation: animateInPrimary;
    animation: animateInPrimary;
    -webkit-animation-duration: 750ms;
    animation-duraton: 750ms;
}

.animate-in-secondary {
    -webkit-animation: animateInSecondary ease-in 1;
    animation: animateInSecondary ease-in 1;
    -webkit-animation-duration: 750ms;
    animation-duraton: 750ms;
}

Теперь я хотел бы, чтобы ионные предметы скользили один за другим. Я думаю, что мне нужно использовать свойство css -webkit-animation-delay. Но я не уверен, куда его вставить. Надеюсь, кто-то может помочь. Спасибо, Эшли


person ashley    schedule 03.08.2017    source источник


Ответы (1)


Если вы хотите сделать это с помощью CSS-анимации, вам нужно будет добавить добавочный класс к каждому элементу списка, а затем соответствующим образом распределить анимации, как показано здесь: CSS-анимации с задержкой для каждого дочернего элемента

Проще всего это сделать с помощью встроенной функции stagger модуля анимации. Взгляните на эту статью: https://coursetro.com/posts/code/78/Creating-Stagger-Animations-in-Angular-4#

person rhysclay    schedule 15.05.2018