angularjs的animation动画几种简单用法 Raowensheng's blog

第一种：利用ng的module公开的API方法：animation

一个弹出框的淡入淡出效果.

    弹出框

fadeIn/fadeOut

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;        }

进入在线例子