如何在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); 
    } 
    } 
} 

編碼愉快:)