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

Question

基本上,我想在角度(当前为4)中使用web-animations-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>

我如何将其翻译成Angular？

这是我到目前为止尝试过但只运行一次:

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? 
  ])
]

有没有办法用@ angular/animation插件来代替存储ElementRef并将其作为上面的示例？或者我误解了这个插件的用途？

提前致谢.

Answer 1

我正在为我的项目搜索无限动画.没有这方面的文件angular.io.所以我尝试了这种方式并花了我很多时间来实现这一目标.希望它会帮助别人.首先定义animation你的class.

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()生命周期挂钩,更新您的state属性值'out'与setTimeout功能和结束后的回调函数,更新您的state属性值到'in'并检查您的state属性值,如果in再更新到out通过setTimeout这样的功能

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);
    }
  }
}

快乐编码:)