Question

是否可以在Angular 2+中暂停动画？我想在鼠标悬停在一个元素上时暂停动画，然后在鼠标移出时从动画中断处继续动画。

我创建了一个简单的脚本来演示：https://stackblitz.com/edit/scrolling-text

这是我的组件：

animation-play-state: paused;

我没有运气就试过.scrolling-text:hover, .container:hover { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused; }：

kthSmallest()

有什么方法可以让它发挥作用吗？

Answer 1

我找到了一种方法AnimationBuilder。

import { Component, ElementRef, ViewChild } from '@angular/core';
import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';

@Component({
  selector: 'my-app',
  template: `
    <div class="container" (mouseover)="player.pause()" (mouseout)="player.play()">
      <div #el class="scrolling-text">Hover to pause!</div>
    </div>
  `,
  styles: [`
    .container {
      height: 30px;
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .scrolling-text {
      position: absolute;
      white-space: nowrap;
    }
  `]
})
export class AppComponent  {

  @ViewChild('el') el: ElementRef;
  state = 0;

  private factory = this.builder.build([
    style({left: '-100px'}),
    animate(10000, style({left: '100%'}))
  ]);
  private player;

  constructor(private builder: AnimationBuilder) { }

  ngOnInit() {
    this.animate();
  }

  private animate() {
    this.player = this.factory.create(this.el.nativeElement, {});

    this.player.onDone(() => {
      this.animate();
    });

    this.player.play();
  }

}

Live Demo

Answer 2

虽然不是最佳解决方案。由于

this.player = this.factory.create(this.el.nativeElement, {});

在RendererAnimationPlayer中创建另一个WebAnimationsPlayer实例

您可以通过以下方式自行检查：

 console.log(this.player._renderer.engine.players.length);

当然，对于您而言，这并不重要，但仍然如此。当您尝试在诸如mousemove事件之类的事件中重用动画时，这会起作用。然后，Angular最多可以创建1000个播放器。并溢出内存。

如果您想更有效地重用动画，则应该重用现有的播放器。

或致电

 if (this.player) {
      this.player.destroy();
 }

之前

this.player = this.factory.create(this.el.nativeElement, {});

暂停角动画

2 个答案: