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

浏览数：123 / 时间：2015年06月09日

通过几中指令就能完成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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 使用 log 时间 si it im io class style 使用 log 时间 si it im io

相关文章

随机文章

您可能还喜欢

您可能还喜欢