Я создаю приложение Angular со сворачиваемым меню. Кнопка, переключающая меню, должна вращаться всякий раз, когда меню раскрывается или сворачивается, поэтому на элементе изменения размера есть вращающаяся кнопка (изменение ширины / изменение поля). Вращение работает, когда размер не изменяется, но как только изменяется размер родительского элемента, анимация вращения не отображается. Вот минимальный пример, показывающий мою проблему:
import { Component } from '@angular/core';
import { animate, trigger, state, transition, style } from '@angular/animations';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
animations: [
trigger('translate', [
state('moveRight', style({ marginLeft: '200px' })),
state('moveLeft', style({ marginLeft: '0px' })),
transition('moveRight => moveLeft', [ animate('0.5s') ]),
transition('moveLeft => moveRight', [ animate('0.5s') ])
]),
trigger('rotate', [
state('turnRight', style({ transform: 'rotate(0deg)' })),
state('turnLeft', style({ transform: 'rotate(180deg)' })),
transition('turnRight => turnLeft', [ animate('0.5s') ]),
transition('turnLeft => turnRight', [ animate('0.5s') ])
])
]
})
export class AppComponent {
isToggled = true;
toggle() {
this.isToggled = !this.isToggled;
}
}
А это мой шаблон:
<div [@translate]="isToggled ? 'moveRight' : 'moveLeft'">
<div [@rotate]="isToggled ? 'turnRight' : 'turnLeft'" (click)="toggle()" style="width:100px;height:100px;">
Hello World!
</div>
</div>
Когда я удаляю @translate -анимацию из внешнего div, поворот выполняется анимация, в противном случае я вижу только движущуюся анимацию. Бывает как в Chrome, так и в Firefox, я бегаю Angular 8.