Angular 6背景图像淡入淡出动画

Question

我对角度6中的动画有问题。我不确定我是否做得对，但我已经准备好了带有组件代码一部分的stackblitz。

我要实现的是在* ngIf语句满足时该项目出现时的平滑动画，但是现在看来，放置在crossfade-images组件中的两个子元素的状态被视为一个元素（我不确定如果我的假设是正确的）。但我想做些类似的事情：第一次加载时，第一个项目从顶部滑落，经过一定间隔后，该项目应该滑落，与此同时，另一个交叉淡入淡出图像的孩子应该从顶部滑落，并且应该在无限循环

你们能检查一下我的筹码并给我帮助吗？

Stackblitz

Answer 1

您遇到的麻烦是transform: 'translateY(-100%)'定位元素，然后在定位之后应用变换。因此，设置方式如下：

这些框指示图像的位置，黄色是第一个图像，红色是第二个图像。您需要做的是position:absolute您的图像（容器为position:relative，并从bottom: "100%"过渡到top:"100%"

https://angular-gwxfta.stackblitz.io

Answer 2

我离开了transformY(-100%)，只是将position: relative添加到了父容器，并将position: absolute添加到了子div，它可以按我的意愿工作。非常感谢。

链接到Stackblitz上的工作代码