第一种:利用ng的module公开的API方法:animation
一个弹出框的淡入淡出效果.
var app = angular.module("app",["ngAnimate"]);app.animation(".popupBox",["$animateCss", function ($animateCss) { return { enter : function (element) { return $animateCss(element,{ from : { opacity : 0 }, to : { opacity : 1 }, duration : 1.5 }) }, leave : function (element) { return $animateCss(element,{ from : { opacity : 1}, to : { opacity : 0 }, duration : 1.5 }); } }}]);
第二种:直接用自带的css类
.popupBox.ng-enter { transition:0.5s linear all; opacity:0; } .popupBox.ng-enter.ng-enter-active { opacity:1; } .popupBox.ng-leave { transition:0.5s linear all; opacity:1; } .popupBox.ng-leave.ng-leave-active { opacity:0; }