我正在构建一个具有可折叠菜单的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。
一种解决方案可以是将这两种动画结合起来。
trigger('translate', [
/*
state('moveRight', style({ transform: 'translateX(200px)' })),
state('moveLeft', style({ transform: 'translateX(0)' })),
transition('moveRight => moveLeft', [ animate('0.5s') ]),
transition('moveLeft => moveRight', [ animate('0.5s') ]),
*/
]),
trigger('rotate', [
state('turnRight', style({ transform: 'rotate(0deg) translateX(200px)' })),
state('turnLeft', style({ transform: 'rotate(180deg) translateX(0)' })),
transition('turnRight => turnLeft', [ animate('0.5s') ]),
transition('turnLeft => turnRight', [ animate('0.5s') ])
])
]
这里有一个工作实例。https:/stackblitz.comeditangular-translate-rotate-animation?file=srcappapp.component.ts。