angular : ng-animate : css 原理，详解

通过几中指令就能完成1.2.xx的animate

·ng-repeat

·ng-show，ng-hide

·ng-if，ng-include，ng-view

·ng-switch

·ng-class

 

angular会在不同的时间加上不同的css

假设我们使用了ng-if

.animate.ng-enter {
    top: -200px; //进场的起点
}

.animate.ng-enter.ng-enter-active {
    top: 0px; //进场的终点
}
            
.animate {
    top: 0px; //原本的位置
}

.animate.ng-leave {
    top: 0px; //离开的起点
}

.animate.ng-leave.ng-leave-active {
    top: 200px; //离开的终点
}

angular会在不同时间给上不同的css，但是在ff是看不到的，我也不知道为什么。。。

以上是通过transition来完成动态，如果要更好的动画可以使用keyframes