“Angular 2.0 for TypeScript”(alpha)动画如何工作？

对于CSS方式，您可以从他们的回购中检查这个example，这正是您正在寻找的。

使用AnimationBuilder，您可以模拟与此相同的行为

首先，您设置了将按住按钮和div进行切换的模板

@Component({
  // SetTing up some styles
  template: `
    <div animate-Box #Box="ab"  style="height:0; width:50%; overflow: hidden;">Some content</div>
    <button (click)="Box.toggle(visible = !visiblE)">Animate</button>
  `,directives : [AnimateBox] // See class below
})

然后创建将处理动画的指令

@Directive({
  SELEctor : '[animate-Box]',exportAs : 'ab' // Necessary,we export it and we can get its 'toggle' method in the template
})
class AnimateBox {
  constructor(private _ab: AnimationBuilder,private _e: ElementRef) {}

  toggle(isVisible: @R_696_8487@an = falsE) {
    let animation = this._ab.css();
    animation
      .setDuration(1000); // Duration in ms

    // If is not visible,we make it slide down
    if(!isVisiblE) {

      animation
        // Set initial styles
        .setFromStyles({height: '0',width: '50%',overflow: 'hidden'})
        // Set styles that will be added when the animation ends
        .setToStyles({height: '300px'})
    } 
    // If is visible we make it slide up
    else {
      animation
        .setFromStyles({height: '300px',width: '50%'})
        .setToStyles({height: '0'})
    }

    // We start the animation in the element,in this case the div
    animation.start(this._e.nativeElement);
  }
}

参考

> Animation API，超级简单，真的很简单。

笔记

这是一个临时API，新的名为ngAnimate 2.0的还不可用。但是，您可以查看@ matsko在AngularConnect – ngAnimate 2.0的演讲中的新功能。

这是一个plnkr与责备。

我希望它有帮助。