使用 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 是合适的
关于javascript - 具有计算时间的 Angular 2 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42786892/