对离子滑动列表进行动画处理

Question

当前 我正在将一些动画与我的滑动离子列表一起使用，例如根据本教程从左向右滑动和内容淡入。 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。但我不确定在哪里插入它。希望有人能帮忙。谢谢 艾希礼

Answer 1

如果要对 CSS 动画执行此操作，则需要做的是向每个列表项添加一个增量类，然后相应地错开动画，如下所示： 每个子元素具有延迟的 CSS 动画

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