Javascript 角度6背景图像交叉淡入淡出动画

我对angular 6中的动画有问题。我不确定我是否做的每件事都是对的，但我已经用我的组件的一部分代码准备了stackblitz

我想要实现的是在*ngIf station完成时项目出现时的平滑动画，但现在看来，放置在crossfade images组件中的两个子元素的状态被视为一个元素（我不确定我的假设是否正确）。但我想做一些类似的事情：在第一次加载时，第一个项目从顶部向下滑动，经过一段时间后，这个项目应该向下滑动，同时另一个crossfade图像的子项应该从顶部滑动，并且应该以无限循环的方式发生

你们能帮我查一下stackblitz吗

---

您遇到的问题是

变换：“translateY（-100%）”

定位元素，然后在它们定位后应用变换。因此，您设置它的方式是：

方框指示图像的位置，黄色为第一个图像，红色为第二个图像。您需要做的是

position:absolute

您的图像（容器为

position:relative

，并从

底部：“100%”

过渡到

顶部：“100%”

---

我已经离开了

transformY（-100%）

，只是在父容器中添加了

position:relative

，在children divs中添加了

position:absolute

，它可以按照我的要求工作。非常感谢

---

链接到

欢迎！尝试找出它很有趣！：D