Animation Angular2基于动画制作动画后立即返回初始状态，以便能够多次运行动画

我正在尝试使用动画模块完成一个简单的Angular2动画

以下是我迄今为止所做的工作：

一切都如我所料，红十字会逐渐消失在顶端的运动中

我的问题是，我希望能够尽可能多地制作相同的动画

我使用带有回调的

onComplete

方法将样式重置为初始状态。我唯一的问题是，对象不是立即返回到初始状态，而是“返回”。所以我有两个动画，而不是只有一个

我想我误解了Angular2动画模块的一些概念，或者可能只是缺乏必要的CSS技能

谢谢你的帮助

以下是我目前的代码：

//我们的根应用程序组件
从'angular2/core'导入{Component，Directive，ElementRef}；
从'angular2/platform/browser'导入{bootstrap}；
从“angular2/src/animate/animation_builder”导入{AnimationBuilder}；
从“@reactivex/rxjs/dist/cjs/Subject”导入主题；
@指示({
选择器：“[animate box]”，
主持人:{
“[style.background color]”：“'transparrent'”
},
exportAs:'ab'
})
类AnimateBox{
动画：动画；
a:动画；
cb:函数=（）=>{
console.log（“动画完成”）；
console.dir（this.a）；
this.a.applyStyles（{top:'-20px'，不透明度：'100'}）；
};
构造函数（private _ab:AnimationBuilder，private _e:ElementRef）{
}
切换（isVisible:boolean=false）{
this.animation=this._ab.css（）；
这是动画
.设定持续时间（1000）；
this.animation.addAnimationClass（“测试动画类”）；
此文件为.animation.setFromStyles(
{
顶部：'-20px'，
不透明度：“100”，
})
.setToStyles(
{
不透明度：“0”，
顶部：'-120px'
});
this.a=this.animation.start（this.\e.nativeElement）；
this.a.onComplete（this.cb）；
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`
1.
使有生气
`,
指令：[AnimateBox]
})
导出类应用程序{
可见=真实；
}
引导（App.catch）（err=>console.error（err））；

更新

我只创建了两个向前和向后的动画，并在上一个动画的onComplete回调结束时开始一次运行

类AnimateBox{
//动画：动画；
//a:动画；
构造函数（私有_ab:AnimationBuilder，私有_e:ElementRef）{}
createAnimation:Function=（正向：布尔，计数：数字）：Animation=>{
动画=这个；
动画。设置持续时间（1000）；
addAnimationClass（“测试动画类”）；
如果（转发）{
animation.setFromStyles({
顶部：'-20px'，
不透明度：“100”，
})
.setToStyles({
顶部：'-120px'
不透明度：“0”，
});
}否则{
animation.setFromStyles({
顶部：'-120px'，
不透明度：“0”，
})
.setToStyles({
不透明度：“100”，
顶部：'-20px'
});
}
a=animation.start（this._e.nativeElement）；
控制台日志（a）；
a、 onComplete（（）=>{this.onComplete（forward，count）；}）；
};
onComplete:Function=（正向：布尔，计数：数字）=>{
console.log（“动画完成”）；
//console.dir（this.a）；
//applyStyles（{top:'-20px'，不透明度：'100'}）；
如果（计数）{
a=this.createAnimation（！forward，--count）；
console.log（'a'+a）；
}
};
切换：函数=（isVisible:boolean=false）=>{
这个.createAnimation（true，10）；
};
}

原创

当你设定

cb:Function=（）=>{
console.log（“动画完成”）；
console.dir（this.a）；
//this.a.applyStyles（{top:'-20px'，不透明度：'100'}）；
};

顶部

已设置动画。只需将行注释掉，它就会在向上移动后停止

---

setFromStyles（）

也是多余的，因为元素已经具有该样式

这个答案忽略了我的要点“多次运行动画”。这基本上禁用了onComplete方法。它会将图像移动到顶部，图像保持在那里。我的意思是在动画结束时立即将图像恢复，以便在再次按下“动画”按钮时为另一个动画做好准备。我明白了，从你问题的标题来看，这不是很明显。我稍后再看。你说得对，我更新了标题。这也是我使用setFromStyles和setToStyles方法的原因。我的想法是让主类的top和opacity值位于组件在初始页面加载时出现的位置，使用元素样式运行动画，并在onComplete回调中完成动画时删除样式。这基本上就是我的代码所做的。唯一真正的问题是，当我在回调中更改样式时，状态更改也会设置动画。我希望它立即出现在它的初始位置没有动画。好的！这很有效。这是一个通用的答案，允许创建我想要的。谢谢你！动画是一个非常基本的实现，目前只是实验性的。当棱角核心部件更稳定时，它将得到显著改善。