angularjs不同版本的代码写法各有千秋，动画模块的写法也各有不同，以下是收集到的两大版本的写法，各位请：
angularjs1.1.5版本（1.2之前）
index.html代码：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>ng-animate</title>
<style>
li{list-style: none; }
body{margin: 50px; background-color: #333; color: #ccc; overflow: hidden;}
h3{color: #fff;}
.animate-enter, .animate-leave {
transition: 500ms ease-in all;
position: relative;
display: block;
}
.animate-enter.animate-enter-active, .animate-leave {
left: 0;
}
.animate-leave.animate-leave-active, .animate-enter {
left: 500px;
}
</style>
</head>
<body ng-app>
<h3>Songs on The Beatles - Sgt. Pepper's Lonely Hearts Club Band (1967)</h3>
<div ng-controller="myCtrl">
<input type="text" ng-model="search">
<button type="submit">Filter</button>
<ul>
<li ng-animate="'animate'" ng-repeat="song in songs | filter:search">
{{song}}
</li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.1.5/angular.js" type="text/javascript"></script>
<script src="index.js"></script>
</body>
</html>
index.js
function myCtrl($scope) {
$scope.songs = ['12测试', '23测试', '34测试', '45测试', '56测试', '67测试', '78测试', '89测试', '91测试'];
}
1.4.6版本结合视图和路由
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animate</title>
<link href="animate.css" rel="stylesheet">
</head>
<body ng-app="anchoringExample">
<a href="#/">Home</a>
<hr />
<div class="view-container">
<div ng-view class="view"></div>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.js" type="text/javascript"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.js" type="text/javascript"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-route.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
home.html
<h2>Welcome to the home page</h1>
<p>Please click on an element</p>
<a class="record"
ng-href="#/profile/{{ record.id }}"
ng-animate-ref="{{ record.id }}"
ng-repeat="record in records">
{{ record.title }}
</a>
profile.html
<div class="profile record" ng-animate-ref="{{ profile.id }}">
{{ profile.title }}
</div>
script.js
// JavaScript Document
(function(angular) {
'use strict';
angular.module('anchoringExample', ['ngAnimate', 'ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeController as home'
});
$routeProvider.when('/profile/:id', {
templateUrl: 'profile.html',
controller: 'ProfileController as profile'
});
}])
.run(['$rootScope', function($rootScope) {
$rootScope.records = [
{ id:1, title: "Miss Beulah Roob" },
{ id:2, title: "Trent Morissette" },
{ id:3, title: "Miss Ava Pouros" },
{ id:4, title: "Rod Pouros" },
{ id:5, title: "Abdul Rice" },
{ id:6, title: "Laurie Rutherford Sr." },
{ id:7, title: "Nakia McLaughlin" },
{ id:8, title: "Jordon Blanda DVM" },
{ id:9, title: "Rhoda Hand" },
{ id:10, title: "Alexandrea Sauer" }
];
}])
.controller('HomeController', [function() {
//empty
}])
.controller('ProfileController', ['$rootScope', '$routeParams', function($rootScope, $routeParams) {
var index = parseInt($routeParams.id, 10);
var record = $rootScope.records[index - 1]; this.title = record.title;
this.id = record.id;
}]);
})(window.angular);
animate.css
@charset "UTF-8";
body {
overflow-x: hidden;
}
.record {
display:block;
font-size:20px;
}
.profile {
background:black;
color:white;
font-size:100px;
}
.view-container {
position:relative;
}
.view-container > .view.ng-animate {
position:absolute;
top:;
left:;
width:100%;
min-height:500px;
}
.view.ng-enter, .view.ng-leave,
.record.ng-anchor {
transition:0.5s linear all;
}
.view.ng-enter {
transform:translateX(100%);
}
.view.ng-enter.ng-enter-active, .view.ng-leave {
transform:translateX(0%);
}
.view.ng-leave.ng-leave-active {
transform:translateX(-100%);
}
.record.ng-anchor-out {
background:red;
}
总结：1.2之前的动画不需要单独引入animate模块，angularjs将动画模块封装在源码中。1.2版本之后angularjs开始模块引入，1.2-1.3.x之间的动画未做详细了解，但通过修改引入版本发现，1.2-1.3.x之间的动画状态没有1.4之后的动画状态多(1.4版本对动画模块进行了重构)。1.5开始，URL路由ng-href属性多了"!"，详细如下：
<!-- 1.5之前 -->
<a class="record" ng-href="#/profile/{{ record.id }}" ng-animate-ref="{{ record.id }}" ng-repeat="record in records">{{ record.title }}</a>
<!-- 1.5及之后 -->
<a class="record" ng-href="#!/profile/{{ record.id }}" ng-animate-ref="{{ record.id }}" ng-repeat="record in records">{{ record.title }}</a>