在平移元素内旋转动画

Question

我正在构建一个带有可折叠菜单的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>

当我从外部div移除@translate-animation时，将执行旋转动画，否则我只看到移动动画。在Chrome和Firefox中都会发生这种情况，我运行的是Angular 8。

Answer 1

一种解决方案是将这两个动画结合起来。

    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.com/edit/angular-translate-rotate-animation?file=src/app/app.component.ts