暂停角度动画 [英] Pause Angular Animations

问题描述

是否可以在 Angular 2+ 中暂停动画?我想在将鼠标悬停在元素上时暂停动画，并在鼠标移开时从停止的位置恢复动画.

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

这是我的组件:

import { Component, ElementRef, ViewChild } from '@angular/core';从@angular/animations"导入{触发器、状态、样式、动画、过渡}；@成分({选择器:'我的应用'，模板:`<div class="容器"><div class="scrolling-text" [@scroll]="state" (@scroll.done)="scrollDone()">悬停暂停！</div>

`，样式:[`.容器 {高度:30px；溢出:隐藏；位置:相对；宽度:100%；}.scrolling-text {位置:绝对；空白:nowrap；}/* 下面不能暂停 */.scrolling-text:hover, .container:hover {-moz-animation-play-state:暂停；-webkit-animation-play-state:暂停；动画播放状态:暂停；}`]，动画:[触发器('滚动'，[state('on', style({left: '-100px'})),过渡('* => *'，[样式({左:'-100px'})，动画(10000，样式({左:'100％'}))])])]})导出类 AppComponent {状态 = 0;滚动完成(){this.state++;}}

我尝试了 animation-play-state: paused; 没有运气:

.scrolling-text:hover, .container:hover {-moz-animation-play-state:暂停；-webkit-animation-play-state:暂停；动画播放状态:暂停；}

有什么办法让它起作用吗?

解决方案

我找到了一种使用 AnimationBuilder 做到这一点的方法.

import { Component, ElementRef, ViewChild } from '@angular/core';从@angular/animations"导入 { 样式、动画、AnimationBuilder、AnimationPlayer}；@成分({选择器:'我的应用'，模板:`<div class="container" (mouseover)="player.pause()" (mouseout)="player.play()"><div #el class="scrolling-text">悬停暂停！</div>

`，样式:[`.容器 {高度:30px；溢出:隐藏；位置:相对；宽度:100%；}.scrolling-text {位置:绝对；空白:nowrap；}`]})导出类 AppComponent {@ViewChild('el') el: ElementRef;私人工厂 = this.builder.build([样式({左:'-100px'})，动画(10000，样式({左:'100％'}))]);私人球员；构造函数(私有构建器:AnimationBuilder){}ngOnInit() {this.player = this.factory.create(this.el.nativeElement, {});this.animate();}私人动画(){this.player.reset();this.player.onDone(() => {this.animate();});this.player.play();}}

现场演示

Is it possible to pause animations in Angular 2+? I would like to pause an animation upon mousing over an element and resume the animation from where it left off when mousing out.

I have created a simple script to demonstrate: https://stackblitz.com/edit/scrolling-text

Here's my component:

import { Component, ElementRef, ViewChild } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'my-app',
  template: `
    <div class="container">
      <div class="scrolling-text" [@scroll]="state" (@scroll.done)="scrollDone()">Hover to pause!</div>
    </div>
  `,
  styles: [`
    .container {
      height: 30px;
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .scrolling-text {
      position: absolute;
      white-space: nowrap;
    }

    /* Below doesn't work to pause */

    .scrolling-text:hover, .container:hover {
      -moz-animation-play-state: paused;
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
    }
  `],
  animations: [
    trigger('scroll', [
      state('on', style({left: '-100px'})),
      transition('* => *', [
        style({left: '-100px'}),
        animate(10000, style({left: '100%'}))
      ])
    ])
  ]
})
export class AppComponent  {
  state = 0;

  scrollDone() {
    this.state++;
  }

}

I tried animation-play-state: paused; without luck:

.scrolling-text:hover, .container:hover {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

Is there any way to get this to work?

解决方案

I found a way to do it with 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;

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

  constructor(private builder: AnimationBuilder) { }

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

  private animate() {
    this.player.reset();

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

    this.player.play();
  }

}

Live Demo

这篇关于暂停角度动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！