如何在Angular 2中执行无限动画？

Question

基本上，我想利用角度（当前为4）的web动画api polyfill在元素上执行无限动画。

让我们来看看一个基本的无棱角例如：

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然后更新为outsetTimeout函数li柯本

export class AppComponent implements AfterViewInit { 
    state = 'in'; 
    ngAfterViewInit() { 
    setTimeout(() => { 
     this.state = 'out'; 
    }, 0); 
    } 
    onEnd(event) { 
    this.state = 'in'; 
    if (event.toState === 'in') { 
     setTimeout(() => { 
     this.state = 'out'; 
     }, 0); 
    } 
    } 
} 

编码愉快:)