Angular 6 анимация вперед (animation-fill-mode в Angular)

Question

У меня есть свойство, которое анимировано с помощью CSS и работает нормально:

animation: collapse1 0.3s forwards;

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

Теперь он работает так:

animation: collapse1 0.3s;

, но должен работать так:

animation: collapse1 0.3s forwards;

Другими словами, возможно ли обеспечить анимацию-заливку в Angular?Я использую Angular 6.

Вот демо: https://stackblitz.com/edit/angular-uw3o6u

Демо имеет 2 кнопки.

Работает, когда пользователь перемещает мышь к кнопке (: hover css).Но мне нужно такое поведение, когда пользователь нажимает кнопку (случай 2).

Конечная позиция после нажатия должна быть такой:

Но он возвращается к началу:

---

Я решил это с помощью классов CSS: https://stackblitz.com/edit/angular-kdfgxw

Но этовсе еще не угловая анимация.

Кто-нибудь знает, как решить эту проблему с помощью угловой анимации?Возможно ли это?

Answer 1

У меня была такая же проблема.И использовать, чтобы окончательно решить ее с помощью таких CSS-классов, как вы.

Но я нашел решение (это было довольно просто и очевидно, arf) .. Вы должны включить ваш последний стиль в функцию state () в вашем случае

См .:

trigger(openCloseAnimation, [
  state('closed', style({ top: '9px', transform: 'rotate(-45deg)', offset: 1 })),
  transition('open => close',animate(300)),
  transition('close => open', animate(300))
])

Кстати, вы не можете использовать запрос Внутри функции состояния, поэтому для внутренних классов вам придется переключиться на innerTrigger и использовать animateChild () в родительском триггере.