Angular 2+ 中可以暂停动画吗?我想在鼠标悬停在元素上时暂停动画,并在鼠标移出时从停止的位置恢复动画。
我创建了一个简单的脚本来演示:https://stackblitz.com/edit/scrolling-text https://stackblitz.com/edit/scrolling-text
这是我的组件:
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;
没有运气:
.scrolling-text:hover, .container:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
有什么办法让它发挥作用吗?