angular - angular中的animejs没有动画

我正在尝试在Angular4项目中使用animejs。
我一直在网上寻找一些提示和线索，如何进行此操作，但几乎没有任何地方。

所以我想沿着x坐标移动盒子...

animejs-logo.component.ts文件:

import { Component, OnInit } from '@angular/core';
import anime from 'animejs';

@Component({
  selector: 'app-animejs-logo',
  templateUrl: './animejs-logo.component.html',
  styleUrls: ['./animejs-logo.component.scss']
})
export class AnimejsLogoComponent {
  animation = anime({
    targets: ['.box'],
    translateX: [
      { value: 500, duration: 1000 },
      { value: 0, duration: 1000 }
    ],
    duration: 2000,
    loop: true
  });

  animate() {
    console.log('play');
    this.animation.play();
  }
}

animejs-logo.component.scss:

.box {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 4px;
}
.red { background-color: #f00; }
.green { background-color: #0f0; }
.blue { background-color: #00f; }

animejs-logo.component.html:

<div class="container">
    <button (click)="animate()">Play</button>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box blue"></div>
</div>

如您所见，没有什么特别的或令人难以置信的。首先尝试animejs ...
可以请人向我解释我做错了什么吗？为什么不启动？
我在控制台，项目的编译中没有任何错误。

最佳答案

好，解决了

问题是我在生命周期的错误时刻定义了动漫对象。
事实证明，必须渲染所有元素，然后可以定义动画。因此，所有定义都在ngAfterViewInit中，例如:

ngAfterViewInit() {
    this.square = anime({
        targets: '#animation_1 .animate',
        translateX: [
            { value: 250, duration: 1000 },
            { value: 0, duration: 1000 }
        ],
        duration: 2000,
        loop: false,
        autoplay: false
   });
}

关于angular - angular中的animejs没有动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46585735/