Angular 2で無限アニメーションを実行するにはどうすればよいですか？

Question

基本的に、要素上で無限のアニメーションを実行するために、web-animations-api polyfillを角度（現在は4）で使用したいと考えています。

はのは、基本的な非角度の例を見てみましょう：

var ball = document.getElementById('ball'); 
 

 
ball.animate([ 
 
    { transform: 'scale(0.5)' }, 
 
    { transform: 'scale(1)' } 
 
], { 
 
    duration: 1000, 
 
    iterations: Infinity, 
 
    direction: 'alternate', 
 
    easing: 'ease-in-out' 
 
});

.container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
.ball { 
 
    position: absolute; 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 50%; 
 
    border: 2px solid #E57373; 
 
    background: #F06292; 
 
    box-shadow: 0px 0px 15px #F06292; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script> 
 
<div class="container"> 
 
    <div class="ball" id="ball"><div> 
 
</div>

どのように私は角にそれを翻訳していますか？

これは私がこれまで試したものですが、一度だけ動作します：

animations: [ 
    trigger('scale', [ 
    transition('* <=> *', animate('1s ease-in-out', keyframes([ 
     style({ transform: 'scale(0.5)' }), 
     style({ transform: 'scale(1)' }) 
    ]))) // How do I specify the iterations, or the direction? 
    ]) 
] 

は@角度/アニメーションとプラグインの代わりに、ElementRefを格納し、一例として、それをやっていることを行うにはそこの方法です上記？または、私はこのプラグインが意図していることを誤解しているかもしれませんか？

ありがとうございます。

Answer 1

私のプロジェクトで無限のアニメーションを探していました。 angular.ioにはこれに関するドキュメントはありません。だから私はこの方法を試して、これを達成するために多くの時間を要した。それが他人を助けることを願っています。 classに最初にanimationを定義してください。

animations: [ 
trigger('move', [ 
    state('in', style({transform: 'translateX(0)'})), 
    state('out', style({transform: 'translateX(100%)'})), 
    transition('in => out', animate('5s linear')), 
    transition('out => in', animate('5s linear')) 
]), 
] 

その後、html

<div [@move]="state" (@move.done)="onEnd($event)"></div> 

が、その後state = 'in'を設定し、あなたにそれを挿入し、ngAfterViewInit()ライフサイクルフックで、setTimeout機能を使用してstateプロパティ値'out'を更新し、終了コールバック関数の後、にあなたのstateプロパティの値を更新'in'とstateのプロパティ値を確認してください。inがoutに更新されます。setTimeout関数li KE :)