在Angular2基于Animate的动画之后立即返回初始状态,以便能够多次运行动画

我正在尝试使用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()也是多余的,因为元素已经具有该样式.

在Angular2基于Animate的动画之后立即返回初始状态,以便能够多次运行动画

解决方法

猜你在找的Angularjs相关文章