Angular 2 怎么使用 Animation

[kittencup]

angular 2 的 css animation非常简单 这里提供一个简单的例子，用到animate.css组件提供的class

import {Component,ElementRef,Renderer} from 'angular2/core';
import {AnimationBuilder} from 'angular2/animate';

@Component({
    selector: 'App',
    providers: [AnimationBuilder],
    directives: [],
    template: `
        <h1 #h1>hello</h1>
        <button (click)="start(h1,button)" #button>开始动画</button>
    `
})
export class App {

    constructor(public _animationBuilder:AnimationBuilder,
                public _renderer:Renderer) {

    }

    start(h1:HTMLElement, button:HTMLElement) {

        let origText = button.innerHTML;

        this._renderer.setText(button, '动画中..');

        this._animationBuilder
            .css()
            .addClass('animated')
            .setDuration(5000)
            .addAnimationClass('bounce')
            .start(h1)
            .onComplete(()=> {
                this._renderer.setText(button, origText);
            });
    }
}

[guozhiqi21]

我按照你写的，提示找不到angular2/animate 。是不是这个animate和http一样，需要引入单独的库，我找了一下，没找到，需要引入哪个，谢谢

[kittencup]

用的是什么版本？打包方案是什么。

我用的是beta2,打包是webpack,写了import {AnimationBuilder} from 'angular2/animate';会把animate自动打包进去

[musicq]

我用的beta.8版本，就是用2楼的实例代码，但是一直报错，折腾好久也找不到原因，希望大神解答

[kittencup]

https://github.com/AngularClass/angular2-webpack-starter

我用的是最新的

[musicq]

我解决了，是因为引入的路径不对 import {AnimationBuilder} from 'angular2/animate'; 在beta.8里面改成 import {AnimationBuilder} from 'angular2/src/animate/animation_builder'; 这样就行了

[anghuang]

为什么我的 this._renderer.setText(button, origText);和 this._renderer.setText(button, '动画中..');括号里面的报错

[e-cloud]

现在已经没有 AnimationBuilder 了。JS代码写的动画感觉有点怪怪的，angular 1的纯 css 动画绑定感觉更好。但ng2没有这特性。

另外， @kittencup ng2 现在的动画兼容性如何？