如何在 Angular 中无限迭代动画

Question

我想无限循环动画并在我的组件中停止和启动。我写了下面的代码：

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  animations: [
    // Each unique animation requires its own trigger. The first argument of the trigger function is the name
    trigger('run', [transition('void => *',[animate(1000, keyframes([
      style({transform: 'translateX(0)    rotateY(0)',        offset: 0}),
      style({transform: 'translateX(10%)  rotateY(70deg)',    offset: 0.33}),
      style({transform: 'translateX(20%) rotateY(30deg)',   offset: 0.66}),
      style({transform: 'translateX(0%)',                  offset: 1.0})
    ]))
    ])  
  ])  
]
})

在 HTML 文件中，我编写了以下代码：

<img  @run id="animicon" src="assets/.../logo_1.png" style="background:black" class="image--background">

Answer 1

在此上下文中使用 Angular 动画是不正确的。当通过路由器或 *ngIf 或以编程方式添加组件时，当 regular/plain CSS 无法使用或无法工作时，将使用它们。
添加它们只会使您的代码不必要地复杂，甚至变慢。
对于您在 post 中描述的情况，您不需要 Angular 动画，普通 css 动画就足够了：

CSS

@keyframes myAnimation {
  0%   {transform: translateX(0) rotateY(0)}
  33%  {transform: translateX(10%) rotateY(70deg)}
  66%  {transform: translateX(20%) rotateY(30deg)}
  100% {transform: translateX(0%)}
}

img {
  animation: myAnimation 5s infinite;
}

Demo

但是，如果您仍想使用 Angular 方法，请参考这里。

ts:

.....
animations: [
    // Each unique animation requires its own trigger. The first argument of the trigger function is the name
    trigger('run', [
      transition('* => *', [
        animate(
          1000,
          keyframes([
            style({ transform: 'translateX(0)    rotateY(0)', offset: 0 }),
            style({
              transform: 'translateX(10%)  rotateY(70deg)',
              offset: 0.33,
            }),
            style({
              transform: 'translateX(20%) rotateY(30deg)',
              offset: 0.66,
            }),
            style({ transform: 'translateX(0%)', offset: 1.0 }),
          ])
        ),
      ]),
    ]),
  ],

  ....
  trigger: boolean;

  ngOnInit() {
    setInterval(() => (this.trigger = !this.trigger),1000);
  }

HTML:

<img
  [@run]="trigger"
  .....
/>

demo

如何在 Angular 中无限迭代动画

How to iterate an animation infinitely in Angular

javascript

css

typescript

angular

angular-animations