Angular 2+ 动画暂停实现问询：悬停暂停、移出续播

当然可以实现！在Angular 2+里要实现鼠标悬停暂停动画、移出继续的效果，得根据你用的是纯CSS动画还是Angular动画模块来选择合适的方案，我来给你拆解一下：

一、如果你用的是Angular动画模块（最可能的情况） #

你之前尝试用animation-play-state: paused没生效，大概率是因为Angular的动画模块会接管动画的状态管理，直接修改CSS属性会被Angular的动画更新覆盖掉。这时候我们需要用Angular提供的AnimationPlayer来直接控制动画的播放状态。

实现步骤： #

1. 定义动画并创建AnimationPlayer实例
2. 监听鼠标进入/离开事件，调用播放器的pause()和play()方法

示例代码： #

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

@Component({
  selector: 'app-root',
  template: `
    <div 
      #scrollText 
      class="scroll-text"
      (mouseenter)="pauseAnimation()"
      (mouseleave)="resumeAnimation()"
    >
      这是滚动的文本内容
    </div>
  `,
  styles: [`
    .scroll-text {
      width: 200px;
      overflow: hidden;
      white-space: nowrap;
    }
  `]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('scrollText') scrollText!: ElementRef;
  private animationPlayer!: AnimationPlayer;

  ngAfterViewInit() {
    // 定义滚动动画
    const scrollAnimation = animation(
      animate('10s linear infinite', keyframes([
        style({ transform: 'translateX(100%)', offset: 0 }),
        style({ transform: 'translateX(-100%)', offset: 1 })
      ]))
    );

    // 创建动画播放器并启动
    this.animationPlayer = scrollAnimation.create(this.scrollText.nativeElement);
    this.animationPlayer.play();
  }

  pauseAnimation() {
    if (this.animationPlayer) {
      this.animationPlayer.pause();
    }
  }

  resumeAnimation() {
    if (this.animationPlayer) {
      this.animationPlayer.play();
    }
  }
}

这个方案的优势是完全贴合Angular的动画体系，播放器会自动记住动画暂停的位置，鼠标移出时直接从该位置继续播放，完全符合你的需求。

二、如果你用的是纯CSS动画 #

如果你的动画是通过CSS的@keyframes定义的，那直接修改animation-play-state是可行的，之前没生效可能是没有正确获取到元素或者样式被覆盖。我们可以用Angular的Renderer2来安全地修改元素样式：

示例代码： #

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div 
      #scrollText 
      class="scroll-text"
      (mouseenter)="pauseAnimation()"
      (mouseleave)="resumeAnimation()"
    >
      这是滚动的文本内容
    </div>
  `,
  styles: [`
    .scroll-text {
      width: 200px;
      overflow: hidden;
      white-space: nowrap;
      animation: scroll 10s linear infinite;
    }

    @keyframes scroll {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }
  `]
})
export class AppComponent {
  @ViewChild('scrollText') scrollText!: ElementRef;

  constructor(private renderer: Renderer2) {}

  pauseAnimation() {
    this.renderer.setStyle(
      this.scrollText.nativeElement,
      'animation-play-state',
      'paused'
    );
  }

  resumeAnimation() {
    this.renderer.setStyle(
      this.scrollText.nativeElement,
      'animation-play-state',
      'running'
    );
  }
}

这个方案更简单，适合纯CSS驱动的动画场景，修改的样式不会被Angular动画模块干扰。

内容的提问来源于stack exchange，提问作者Irving