Я хочу оживить s.th.с модулем анимации Angulars или CSS
У меня есть динамический список карт в моем компоненте.Эти карты следует поменять местами в зависимости от того, как их содержит массив.Кнопка может изменять содержимое массива (меняет порядок элементов).
В угловых анимациях в основном используется замедление / замедление, но в моем случае это просто позиционное изменение (своп).Элемент все еще должен оставаться там.Вот короткий пример, чтобы проиллюстрировать, что я имею в виду:
[STATE 1]
[--- ELEMENT A ---] [--- ELEMENT Z ---]
[--- ELEMENT B ---] [--- ELEMENT Y ---]
[--- ELEMENT C ---] [--- ELEMENT X ---]
[--- ELEMENT D ---] [--- ELEMENT W ---]
[--- ELEMENT E ---] [--- ELEMENT V ---]
[--- ELEMENT F ---] [--- ELEMENT U ---]
После нажатия кнопки она должна анимировать, как она двигалась.В этом примере Элемент V поменялся местами с Элементом A
[STATE 2]
[--- ELEMENT V ---] [--- ELEMENT Z ---]
[--- ELEMENT B ---] [--- ELEMENT Y ---]
[--- ELEMENT C ---] [--- ELEMENT X ---]
[--- ELEMENT D ---] [--- ELEMENT W ---]
[--- ELEMENT E ---] [--- ELEMENT A ---]
[--- ELEMENT F ---] [--- ELEMENT U ---]
Есть ли правильный способ сделать это с помощью angular?Или мне действительно нужно взаимодействовать с DOM, чтобы я мог использовать функцию абсолютного позиционирования и перевода css?
Я обновил вопрос на примере стекаблица.
https://stackblitz.com/edit/angular-5mstrg
Это, вероятно, подводит итог проблемы, с которой я столкнулся.Я уже знаю, какие элементы я хочу изменить в TypeScript (данные).
Но для анимации мне нужно знать, где она находится в DOM (для функции translateX).
MyЦель состоит в том, чтобы увидеть обмен с Box1 на Box2 и наоборот с помощью анимации.(Медленно перемещая персонажа туда)