在Angular2动画动画之后立即返回到初始状态，使动画能够多次运行
在Angular2动画动画之后立即返回到初始状态，使动画能够多次运行
提问于 2016-02-12 11:33:25
我正在尝试使用动画模块来完成一个简单的Angular2动画。
以下是我迄今所做的工作：https://plnkr.co/edit/o0ukvWEB4THB0EQmv0Zu
一切都如我所料，红十字会在向顶部移动时逐渐消失。
我的问题是，我想要能够做同样的动画很多次，我想。
我使用onComplete方法进行回调，将样式重置为初始状态。我唯一的问题是，对象"annimates“不是立即返回到它的初始状态。所以我有两个动画而不是一个。
我想我误解了Angular2动画模块的一些概念，或者可能只是缺乏所需的CSS技能。
任何帮助都很感激。
到目前为止，我的代码如下：
//our root app component
import {Component, Directive, ElementRef} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {AnimationBuilder} from 'angular2/src/animate/animation_builder';
import Subject from '@reactivex/rxjs/dist/cjs/Subject';
@Directive({
selector : '[animate-box]',
host : {
'[style.background-color]' : "'transparrent'"
},
exportAs : 'ab'
})
class AnimateBox {
animation: Animation;
a:Animation;
cb: Function = () => {
console.log("animation finished");
console.dir(this.a);
this.a.applyStyles({top: '-20px', opacity: '100' });
};
constructor(private _ab: AnimationBuilder, private _e: ElementRef) {
}
toggle(isVisible: boolean = false) {
this.animation = this._ab.css();
this.animation
.setDuration(1000);
this.animation.addAnimationClass("test-animation-class");
this.animation.setFromStyles(
{
top: '-20px',
opacity: '100',
})
.setToStyles(
{
opacity: '0',
top: '-120px'
});
this.a = this.animation.start(this._e.nativeElement);
this.a.onComplete(this.cb);
}
}
@Component({
selector: 'my-app',
template: `
<span class="vote"><span animate-box #box="ab" class="test-vote"><i class="fa fa-close"></i></span>1</span>
<button data-tooltip="I’m the tooltip text." (click)="box.toggle(visible = !visible)">Animate</button>
`,
directives : [AnimateBox]
})
export class App {
visible = true;
}
bootstrap(App).catch(err => console.error(err));回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-12 15:08:17
更新
我只为向前和向后创建了两个动画，并在前面动画的onComplete回调结束时启动了一个动画。
class AnimateBox {
//animation: Animation;
//a:Animation;
constructor(private _ab: AnimationBuilder, private _e: ElementRef) {}
createAnimation:Function = (forward:boolean, count:number):Animation => {
animation = this._ab.css();
animation.setDuration(1000);
animation.addAnimationClass("test-animation-class");
if(forward) {
animation.setFromStyles({
top: '-20px',
opacity: '100',
})
.setToStyles({
top: '-120px'
opacity: '0',
});
} else {
animation.setFromStyles({
top: '-120px',
opacity: '0',
})
.setToStyles({
opacity: '100',
top: '-20px'
});
}
a = animation.start(this._e.nativeElement);
console.log(a);
a.onComplete(() => { this.onComplete(forward, count);});
};
onComplete:Function = (forward:boolean, count:number) => {
console.log("animation finished");
//console.dir(this.a);
//animation.applyStyles({top: '-20px', opacity: '100' });
if(count) {
a = this.createAnimation(!forward, --count);
console.log('a ' + a);
}
};
toggle:Function =(isVisible: boolean = false) => {
this.createAnimation(true,10);
};
}原始
当你设置
cb: Function = () => {
console.log("animation finished");
console.dir(this.a);
// this.a.applyStyles({top: '-20px', opacity: '100' });
};top是动画回来了。只要评论这条线，它就会在向上移动之后停止。
setFromStyles()也是多余的，因为元素已经有了这种样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35361566
复制相关文章
相似问题
腾讯云开发者
