初试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>

 详细阅读：https://docs.angularjs.org/api/ngAnimate

posted @ 2016-04-26 15:49  前端路引  Views(621)  Comments(0)  Edit  收藏  举报