Angular 6 фоновое изображение плавного анимации

Question

У меня проблема с анимацией в angular 6. Я не уверен, что я все делаю правильно, но я подготовил stackblitz с частью кода моего компонента.

То, чего я хочу добиться, - это плавная анимация, когда элемент появляется, когда выполняется * ngIf, но теперь похоже, что состояния двух дочерних элементов, помещенных в компонент crossfade-images, обрабатываются как один элемент (я не уверен, если мои предположения верны). Но я хотел сделать что-то похожее: при первой загрузке первый элемент скользит вниз сверху, через некоторый интервал этот элемент должен скользить вниз, и в то же время другой дочерний элемент crossfade-изображений должен скользить сверху, и это должно происходить в бесконечный цикл

Не могли бы вы, ребята, проверить мой стек и дать мне руку?

Stackblitz

Answer 1

Я оставил transformY(-100%) и просто добавил position: relative в родительский контейнер и position: absolute в дочерние элементы div, и все работает, как я хотел. Большое вам спасибо.

Ссылка на рабочий код на Stackblitz

Answer 2

Проблема, с которой вы столкнулись, заключается в том, что transform: 'translateY(-100%)' позиционирует элементы, а затем применяет преобразование после того, как они позиционируются. Таким образом, способ, которым вы его настроили:

В полях указано, где расположены изображения, причем первым изображением является желтый, а вторым - красный. То, что вы хотите сделать, это position:absolute ваши изображения (с контейнером position:relative и переходом от bottom: "100%" к top:"100%"

https://angular -gwxfta.stackblitz.io