为离子滑动列表设置动画答案

【问题标题】：Animating an ionic sliding list为离子滑动列表设置动画
【发布时间】：2018-01-11 06:51:33
【问题描述】：

目前我正在使用一些动画与我的滑动离子列表，例如从左到右滑入以及按照本教程淡入内容。 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。但我不确定在哪里插入它。希望有人可以提供帮助。谢谢，阿什利

【问题讨论】：

标签： css angular ionic-framework ionic2 ionic3

【解决方案1】：

如果您想使用 CSS 动画执行此操作，那么您需要为每个列表项添加一个增量类，然后相应地错开您的动画，如下所示：CSS Animations with delay for each child element

更简单的方法是使用动画模块的内置交错功能 - 看看这篇文章：https://coursetro.com/posts/code/78/Creating-Stagger-Animations-in-Angular-4#

【讨论】：