AngularJS 动画用法

AngularJS 使用动画需要引入 angular-animate.min.js 库。 ngAnimate 模型可以添加或移除 class 。ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。 www.djznrobot.com

CSS 过渡
CSS 过渡可以让我们平滑的将一个 CSS 属性值修改为另外一个：

实例
在 DIV 元素设置了 .ng-hide 类时，过渡需要花费 0.5 秒，高度从 100px 变为 0:

<style>
div {
    transition: all linear 0.5s;
    background-color: lightblue;
    height: 100px;
}
.ng-hide {
    height: 0;
}
</style>

CSS 动画
CSS 动画允许你平滑的修改 CSS 属性值:

实例
在 DIV 元素设置了 .ng-hide 类时, myChange 动画将执行，它会平滑的将高度从 100px 变为 0:

<style>
@keyframes myChange {
    from {
        height: 100px;
    } to {
        height: 0;
    }
}
div {
    height: 100px;
    background-color: lightblue;
}
div.ng-hide {
    animation: 0.5s myChange;
}
</style>