
本文介绍了暂停角度动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以在 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
这篇关于暂停角度动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!