初试angularjs动画(animate)
angularjs不同版本的代码写法各有千秋，动画模块的写法也各有不同，以下是收集到的两大版本的写法，各位请：
angularjs1.1.5版本（1.2之前）
index.html代码：
1 <!DOCTYPE html> 2 <html > 3 <head> 4 <meta charset="UTF-8"> 5 <title>ng-animate</title> 6 <style> 7 li{list-style: none; } 8 body{margin: 50px; background-color: #333; color: #ccc; overflow: hidden;} 9 h3{color: #fff;} 10 .animate-enter, .animate-leave { 11 transition: 500ms ease-in all; 12 position: relative; 13 display: block; 14 } 15 .animate-enter.animate-enter-active, .animate-leave { 16 left: 0; 17 } 18 .animate-leave.animate-leave-active, .animate-enter { 19 left: 500px; 20 } 21 </style> 22 </head> 23 <body ng-app> 24 <h3>Songs on The Beatles - Sgt. Pepper's Lonely Hearts Club Band (1967)</h3> 25 <div ng-controller="myCtrl"> 26 <input type="text" ng-model="search"> 27 <button type="submit">Filter</button> 28 <ul> 29 <li ng-animate="'animate'" ng-repeat="song in songs | filter:search"> 30 {{song}} 31 </li> 32 </ul> 33 </div> 34 <script src="http://apps.bdimg.com/libs/angular.js/1.1.5/angular.js" type="text/javascript"></script> 35 <script src="index.js"></script> 36 </body> 37 </html>
index.js
1 function myCtrl($scope) { 2 $scope.songs = ['12测试', '23测试', '34测试', '45测试', '56测试', '67测试', '78测试', '89测试', '91测试']; 3 }
1.4.6版本结合视图和路由
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>animate</title> 6 <link href="animate.css" rel="stylesheet"> 7 </head> 8 <body ng-app="anchoringExample"> 9 <a href="#/">Home</a> 10 <hr /> 11 <div class="view-container"> 12 <div ng-view class="view"></div> 13 </div> 14 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.js" type="text/javascript"></script> 15 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.js" type="text/javascript"></script> 16 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-route.js" type="text/javascript"></script> 17 <script src="script.js" type="text/javascript"></script> 18 </body> 19 </html>
home.html
1 <h2>Welcome to the home page</h1> 2 <p>Please click on an element</p> 3 <a class="record" 4 ng-href="#/profile/{{ record.id }}" 5 ng-animate-ref="{{ record.id }}" 6 ng-repeat="record in records"> 7 {{ record.title }} 8 </a>
profile.html
<div class="profile record" ng-animate-ref="{{ profile.id }}"> {{ profile.title }} </div>
script.js
1 // JavaScript Document 2 (function(angular) { 3 'use strict'; 4 angular.module('anchoringExample', ['ngAnimate', 'ngRoute']) 5 .config(['$routeProvider', function($routeProvider) { 6 $routeProvider.when('/', { 7 templateUrl: 'home.html', 8 controller: 'HomeController as home' 9 }); 10 $routeProvider.when('/profile/:id', { 11 templateUrl: 'profile.html', 12 controller: 'ProfileController as profile' 13 }); 14 }]) 15 .run(['$rootScope', function($rootScope) { 16 $rootScope.records = [ 17 { id:1, title: "Miss Beulah Roob" }, 18 { id:2, title: "Trent Morissette" }, 19 { id:3, title: "Miss Ava Pouros" }, 20 { id:4, title: "Rod Pouros" }, 21 { id:5, title: "Abdul Rice" }, 22 { id:6, title: "Laurie Rutherford Sr." }, 23 { id:7, title: "Nakia McLaughlin" }, 24 { id:8, title: "Jordon Blanda DVM" }, 25 { id:9, title: "Rhoda Hand" }, 26 { id:10, title: "Alexandrea Sauer" } 27 ]; 28 }]) 29 .controller('HomeController', [function() { 30 //empty 31 }]) 32 .controller('ProfileController', ['$rootScope', '$routeParams', function($rootScope, $routeParams) { 33 var index = parseInt($routeParams.id, 10); 34 var record = $rootScope.records[index - 1]; 35 36 this.title = record.title; 37 this.id = record.id; 38 }]); 39 })(window.angular);
animate.css
1 @charset "UTF-8"; 2 body { 3 overflow-x: hidden; 4 } 5 .record { 6 display:block; 7 font-size:20px; 8 } 9 .profile { 10 background:black; 11 color:white; 12 font-size:100px; 13 } 14 .view-container { 15 position:relative; 16 } 17 .view-container > .view.ng-animate { 18 position:absolute; 19 top:0; 20 left:0; 21 width:100%; 22 min-height:500px; 23 } 24 .view.ng-enter, .view.ng-leave, 25 .record.ng-anchor { 26 transition:0.5s linear all; 27 } 28 .view.ng-enter { 29 transform:translateX(100%); 30 } 31 .view.ng-enter.ng-enter-active, .view.ng-leave { 32 transform:translateX(0%); 33 } 34 .view.ng-leave.ng-leave-active { 35 transform:translateX(-100%); 36 } 37 .record.ng-anchor-out { 38 background:red; 39 }
总结：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>
