javascript - Angular 6 背景圖片交叉淡出動畫

我在 Angular 6 的動畫上遇到了一個問題。我不確定自己是否做得完全正確，但我已經準備了一個包含我組件部分代碼的 Stackblitz。

我想要實現的效果是當 *ngIf 條件成立時，項目出現時有平滑的動畫，但現在看起來放在 crossfade-images 元件中的兩個子元素的狀態被視為同一個元素（我不確定我的假設是否正確）。但我想實現的效果是：在第一次載入時，第一個項目從上方滑下，一段時間後這個項目應該滑下，同時 crossfade-images 的另一個子元素應該從上方滑下，並且這個過程應該無限循環。

你們能幫我看看我的 Stackblitz 嗎，並給我一點幫助？

Stackblitz

答案＃1

你遇到的問題是 transform: 'translateY(-100%)' 會對元素進行定位，然後在定位後應用變形。因此，你的設置方式是：

這些方框表示影像的位置，黃色是第一張影像，紅色是第二張影像。你需要做的是將影像設為 position:absolute（容器為 position:relative），並且從 bottom: "100%" 過渡到 top:"100%"。

https://angular-gwxfta.stackblitz.io

答案＃2

我已經移除了 transformY(-100%)，只在父容器添加了 position: relative，並在子 div 添加了 position: absolute，它就像我想要的那樣運作了。非常感謝你。

連結至 Stackblitz 上可運行的程式碼