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

Question

基本上，我想利用 angular 中的 web-animations-api polyfill(目前为 4 个)对元素执行无限动画。

让我们看一个基本的非 Angular 示例:

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()生命周期 Hook ，更新您的 state房产值(value) '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);
    }
  }
}

快乐编码:)