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>

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

初试angularjs动画(animate)的更多相关文章

  1. JQuery动画animate的stop方法使用详解

    JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...

  2. AngularJS 动画总结

    对读过的几篇文章的总结,尽量保证逻辑性,不断补充.精简.更正. 后面会列出参考文章地址,方便以后取用.感谢各位作者以及翻译者. AngularJS 动画思考 一.如何使用 1)我们需要构建什么 2)如 ...

  3. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  4. 自定义动画animate()

    在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp( ...

  5. svg动画 animate

    最近使用到svg的动画animate,简单总结下animate的主要属性: 1.定义:SVG 的animate 动画元素放在形状元素的内部,用来定义一个元素的某个属性如何踩着时点改变.在指定持续时间里 ...

  6. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  7. jQuery---自定义动画 animate();

    自定义动画 animate(); 第一个参数:{对象},里面可以传需要动画的样式 第二个参数:speed 动画的执行时间 第三个参数:easing 动画的执行效果 第四个参数:callback 回调函 ...

  8. 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  9. AngularJS 动画

    AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="htt ...

随机推荐

  1. 记一次 WPS Pro 2019 设备和驱动器图标删除

    1.图标预览 先看样式 2.软件不能关闭 百度和腾讯网盘都会创建,但是可以软件关闭,WPS以前也可以,现在新版作妖了 3.注册表删除 你做那我就删~Code:HKEY_CURRENT_USER\Sof ...

  2. 自己用JQueryUI封装了几个系统常用对话框

    /* * @功能描述:各种系统消息框 * @前置插件:JQueryUI * @开 发 者:魏巍 * @开发日期:2015-04-15 * @version 1.0 */ var SF = {}; SF ...

  3. pyhon opencv mojave 摄像头报错

    https://blog.csdn.net/renzibei/article/details/82998933 参考了上面博主的例子,才明白. Mac macOS 10.14 Mojave Xcode ...

  4. mysql优化 ON DUPLICATE KEY UPDATE

    场景:比如,有一张表,专门记录业务里的唯一数据记录,这张表里如果存在此唯一数据的记录就更新此行数据的某个字段,如果此唯一数据不存在,那么就添加一条最新数据. 一贯操作:如果不知道mysql有 ON D ...

  5. 深入理解JVM(三) -- 对象的内存布局和访问定位

    一 对象的内存布局: 在HotSpot虚拟机中,对象在内存中存储的布局可以分为3块区域:对象头(Header),实例数据(Instance Data)和对齐填充(Padding). HotSpot的对 ...

  6. iOS - 架构模式 - 解密 MVC、MVP、MVVM、VIPER架构

    在 iOS 中使用 MVC 架构感觉很奇怪? 迁移到MVVM架构又怀有疑虑?听说过 VIPER 又不确定是否真的值得切换? 相信你会找到以上问题的答案,如果没找到请在评论中指出. 你将要整理出你在 i ...

  7. Django:基于调试组插件go-debug-toolbar

    1.django-debug-toolbar 介绍 django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面板内容的更多详细信息.返回 ...

  8. jquery实现弹出层完美居中效果

    代码如下: showDiv($("#pop"));function showDiv(obj){ $(obj).show(); center(obj); $(window).scro ...

  9. HttpClient实战三：Spring整合HttpClient连接池

    简介 在微服务架构或者REST API项目中,使用Spring管理Bean是很常见的,在项目中HttpClient使用的一种最常见方式就是:使用Spring容器XML配置方式代替Java编码方式进行H ...

  10. 大数据系列文章-Hadoop基础介绍（一）

    Hadoop项目背景简介 2003-2004年,Google公开了部分GFS个Mapreduce思想的细节,以此为基础Doug Cutting等人用了2年的业余时间,实现了DFS和Mapreduce机 ...