具有计算时间的 Angular 2 动画

Posted 2023-02-22

【中文标题】具有计算时间的 Angular 2 动画

【英文标题】：Angular 2 animation with calculated timing

【发布时间】：2017-08-04 20:12:37

【问题描述】：

使用 TypeScript 和 Angular 2.4

我有一个带有滚动文本的组件（如选框），我有一个指定滚动速度（每秒像素数）的参数。

如何使用组件中的方法动态指定动画长度？

假设以下组件：

import Component, Input, ElementRef, trigger, state, style, transition, animate from '@angular/core';
import * as $ from 'jquery';

const SCROLL_SPEED_DEFAULT = 25;

@Component(
  selector: 'text-scroll',
  template: '<span><ng-content></ng-content></span>',
  animations: [
    trigger('hover', [
      state('idle', style(transformX: '0')),
      state('scrolled', style(transformX: '-100%')),
      transition('idle => scrolled', [
        animate(this.getAnimationSpeed())
      ])
    ])
  ]
)
export class TextScrollComponent 
  @Input('speed') speedTime: number = SCROLL_SPEED_DEFAULT;
  private element: htmlElement;

  constructor(private el: ElementRef) 
    this.element = this.el.nativeElement;
  

  public getAnimationSpeed(): number 
    let element = this.element;
    let elementWidth = $(element).width();
    let difference = this.el.nativeElement.scrollWidth - elementWidth;

    return (difference / Number(this.speedTime)) * 1000;
  

模板：

<text-scroll>My very <b>loooong..</b> text</text-scroll>

【问题讨论】：

目前我找不到使用@Component装饰器的方法，但也许Renderer.animate会合适

【参考方案1】：

目前，我找不到使用@Component 装饰器的方法，但也许 Renderer.animate 会合适