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

-动画时，将执行旋转动画，否则我只看到移动动画。在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') ])
    ])
  ]

---

这里有一个工作示例：

一个解决方案可以是组合两个动画

    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') ])
    ])
  ]

---

这里有一个工作示例：

不是您要求的，但是您可以简化转换代码：

转换（“左转右转”），[animate（'0.5s'））

。

将以两种方式启用转换。肯定还有其他方式。你的代码工作得很好：@Danilo No，他的问题是旋转动作不是动画，而是只在最后运行（没有动画）。谢谢，但当我打开stackblitz时，我看到了平移动画（Hello World向左移动），然后Hello World翻转过来，但没有旋转动画。我希望有一个旋转动画。这不是你要求的，但是你可以简化转换代码：

转换（
transition（'turnlight-turnlight'，[animate（'0.5s'）））
。
将以两种方式启用转换。肯定还有其他方式。你的代码工作得很好：@Danilo No，他的问题是旋转动作不是动画，而是只在最后运行（没有动画）。谢谢，但当我打开stackblitz时，我看到了平移动画（Hello World向左移动），然后Hello World翻转过来，但没有旋转动画。我希望有一个旋转动画。谢谢你的建议，但这并没有真正的帮助：外部div不会移动，但它应该移动。内部div应在外部div移动的范围内旋转。现在我找到了一个解决方案：我使用普通的SASS/CSS在样式表中定义旋转，并通过添加/删除与动画相关的类来触发旋转。感谢您的建议，但这并没有真正的帮助：外部div不会移动，但它应该移动。内部div应在外部div移动的范围内旋转。现在我找到了一个解决方案：我使用普通的SASS/CSS在样式表中定义旋转，并通过添加/删除与动画相关的类来触发旋转。