角度的动画不是动画

我想在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 }
        ],loop: false,autoplay: false
   });
}