Question

我们说我有一个按钮：

<img src="ball.png">

和一些图片：

AnnotationConfigWebApplicationContext rootContext = new AnnotationConfigWebApplicationContext();
rootContext.scan("com.doniies.doniiesweb.config");

我发现了这个：http://www.w3schools.com/angular/angular_animations.asp 但无法为此库找到Angular 2的任何文档版本。

我看到了这个：https://angular.io/docs/ts/latest/api/animate/但它对我没有任何意义。

如何使用角度2使球图像使用CSS过渡弹跳或移动？

有任何参考资料吗？

Answer 1

@Directive({
  selector : '[animate-box]',
  host : {
    '[style.background-color]' : "'transparrent'"
  },
  exportAs : 'ab'
})
class AnimateBox {
  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");
        if(count) {
          a = this.createAnimation(!forward, --count);
          console.log('a ' + a);
        }
    };

    toggle:Function =(isVisible: boolean = false) => {
    this.createAnimation(true,10);
  };
}

@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;
}

使用Angular 2为图像设置动画

1 个答案: