Question

我试图使用Animate模块完成一个简单的Angular2动画。

这是我到目前为止所做的：https://plnkr.co/edit/o0ukvWEB4THB0EQmv0Zu

一切都如我所料，红十字会逐渐消失在顶部。

我的问题是我希望能够根据需要多次制作相同的动画。

我使用onComplete方法进行回调，将样式重置为初始状态。我唯一的问题是，不是立即回到它的初始状态，而是对象＆＃34;回传＆＃34;。所以我有两个动画而不是一个。

我认为我误解了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));

Answer 1

<强>更新

我只为前向和后向创建了两个动画，并在上一个动画的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', 
            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()也是多余的，因为元素已经具有该样式。

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

1 个答案: