在平移元素内旋转动画

问题描述 投票:0回答:1

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

angular animation rotation
1个回答
2
投票

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

    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。

© www.soinside.com 2019 - 2024. All rights reserved.