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

Posted 2021-04-09

我有一个角度为6的动画有问题。我不确定我是否正在做一切正确，但我已经准备好了stackblitz与我的组件的一部分代码。

我想要实现的是当* ngIf statment满足时项目出现时的平滑动画，但现在看起来像放置在crossfade-images组件中的两个子元素的状态被视为一个元素（我不确定我的假设是正确的）。但我想做一些看起来像：首先加载第一个项目从顶部向下滑动，经过一段时间后这个项目应该向下滑动，同时另一个交叉淡入淡出图像的孩子应该从顶部滑动它应该发生在无限循环

你能检查我的stackblitz并帮我一把吗？

Stackblitz

答案

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

方框表示图像的位置，黄色是第一个图像，红色是第二个图像。你想要做的是position:absolute你的图像（容器是position:relative和从bottom: "100%"过渡到top:"100%"

https://angular-gwxfta.stackblitz.io

另一答案

我离开了transformY(-100%)并且刚刚将position: relative添加到父容器中，而position: absolute添加到了儿童div中，它可以按照我的意愿工作。非常感谢。

链接到Stackblitz上的工作代码