Как последовательно выдвигать анимацию angular?

Question

У меня есть сценарий, где у меня есть один видимый div, и когда пользователь хочет, это div исчезает, и должен отображаться новый. Все это должно быть сделано вместе с angular анимациями, такими как . Эта карусель слайдов демонстрирует различные слайды .

. Я создал пример, чтобы показать вам, чего я достиг, но анимация не работает так, как я хочу:

Angular выдвиньте пример.

Проблема в том, что когда появляется следующий видимый элемент, тот, который должен быть удаленным перемещается в строку ниже.

Желаемый эффект аналогичен тому, что происходит сейчас, но с уходящими и входящими элементами, отображаемыми в одной строке.

Я пробовал много вещей как, например, установить элемент .container как не подлежащий переносу с flex-wrap: nowrap;. Это делает оба элемента встроенными, но тот, который удаляется, делает странное движение вправо, прежде чем он сдвинется влево:

Пример с элементами inline и странным эффектом.

Я думаю, что я близок, чтобы найти решение, но это заняло больше времени, чем я ожидал, и я чувствую себя немного заблокированным.

Answer 1

Я думаю, что нашел более простой подход, чем реализация анимации компонента tabs, которая довольно сложна для желаемого использования.

Вот пример, работающий по назначению.

По сути, идея состояла в том, чтобы установить position: relative; для контейнера элементов и position: absolute; для каждого скользящего элемента. Это удерживает положение оставляющего элемента там, где оно должно быть, и правильно его анимирует.