在Angular2基于Animate的动画之后立即返回初始状态,以便能够多次
发布时间:2020-12-17 17:15:54 所属栏目:安全 来源:网络整理
导读:我正在尝试使用Animate模块完成一个简单的Angular2动画. 这是我到目前为止所做的:https://plnkr.co/edit/o0ukvWEB4THB0EQmv0Zu 一切都如我所料,红十字会逐渐消失在顶部. 我的问题是,我希望能够根据需要多次执行相同的动画. 我使用onComplete方法和一个回调,
我正在尝试使用Animate模块完成一个简单的Angular2动画.
这是我到目前为止所做的:https://plnkr.co/edit/o0ukvWEB4THB0EQmv0Zu 一切都如我所料,红十字会逐渐消失在顶部. 我的问题是,我希望能够根据需要多次执行相同的动画. 我使用onComplete方法和一个回调,将样式重置为初始状态.我遇到的唯一问题是,不是立即返回到它的初始状态,而是“回传”.所以我有两个动画而不是一个. 我想我误解了Angular2 Animate模块的一些概念,或者可能只是缺乏所需的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)); 解决方法
更新
我为前向和后向创建了两个动画,并在上一个动画的onComplete回调结束时开始一次运行. Plunker 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',}) .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' }); }; 顶部是动画回来.只需注释掉线,它就会在向上移动后停止. setFromStyles()也是多余的,因为元素已经具有该样式. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- angularjs – 角度新路由器 – 嵌套组件和路由
- WebService的开发之一
- 具有约束力的anglejs – ng风格或风格属性?哪个更好?哪个
- vim – 每当我在插入模式下键入冒号时,它会将我的文本移动到
- angularjs – Angular ui-router $state.go不会重定向内部解
- macos – vim Mac OS X安装gui-support
- bash – 有没有办法关闭并启动带有cli的AWS红移群集?
- meanjs – 使用Angular-file-upload将图片添加到MEAN.JS示例
- AngularJS 用promises和$q处理异步调用
- angularjs – 获取$rootScope:inprog错误,但它需要范围.$适