angime4のアニメがアニメ化していない

Question

Angular4プロジェクトでアニメを使用しようとしています。 私はいくつかのヒントとこれを進める手がかりをオンラインで手がかりにしてきましたが、どこにもほとんど何もありません。

だから私は、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> 

ご覧のとおり、特別なことや素晴らしいことは何もありません。最初にアニメを試してみてください... 私が間違っていることを誰かに説明してもらえますか？なぜそれは始動しないのですか？ 私はコンソール、プロジェクトのコンパイルでエラーが発生していません。

Answer 1

OK、解決済み。

問題はライフサイクルの間違った瞬間にアニメオブジェクトを定義したことです... すべての要素をレンダリングする必要があり、その後はアニメーションを定義できることが判明しました。したがって、すべての定義は、ngAfterViewInitにあります。

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