初试angularjs动画(animate)
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)的更多相关文章
- JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...
- AngularJS 动画总结
对读过的几篇文章的总结,尽量保证逻辑性,不断补充.精简.更正. 后面会列出参考文章地址,方便以后取用.感谢各位作者以及翻译者. AngularJS 动画思考 一.如何使用 1)我们需要构建什么 2)如 ...
- 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】
1.jquery隐藏and显示事件 $("p").hide(); //隐藏事件$("p").hide(1000); //1秒内缓慢隐藏$(" ...
- 自定义动画animate()
在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp( ...
- svg动画 animate
最近使用到svg的动画animate,简单总结下animate的主要属性: 1.定义:SVG 的animate 动画元素放在形状元素的内部,用来定义一个元素的某个属性如何踩着时点改变.在指定持续时间里 ...
- js进阶 13-4 jquery自定义动画animate()如何使用
js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...
- jQuery---自定义动画 animate();
自定义动画 animate(); 第一个参数:{对象},里面可以传需要动画的样式 第二个参数:speed 动画的执行时间 第三个参数:easing 动画的执行效果 第四个参数:callback 回调函 ...
- 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
- AngularJS 动画
AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="htt ...
随机推荐
- 四则运算自动出题之javaweb版
四则运算出题机之JAVAWEB版 要求还是和之前的出题形式一样 begin.jpg <%@ page language="java" contentType="te ...
- Java函数式编程
函数式编程 从JDK1.8开始为了简化使用者进行代码的开发,专门提供有lambda表达式的支持,利用此操作形式可以实现函数式的编程,对于函数编程比较著名的语言是:haskell.Scala,利用函数式 ...
- ashx 接受 post json 请求
HttpContext.Current.Response.ContentType = "application/json"; HttpContext.Curr ...
- docker 安装redis mysql rabbitmq
docker redis mysql rabbitmq 基本命令 安装redis 安装mysql 安装rabbitmq 基本命令 命令格式: docker 命令 [镜像/容器]名字 常用命令: sea ...
- aria2 https
https://github.com/aria2/aria2/issues/361 ... and also make sure that aria2 was built with HTTPS sup ...
- 协程和Goroutines示例
一. 协程的定义 Coroutines are computer-program components that generalize subroutines for non-preemptive m ...
- 英语wacche腕表
手表 (戴在手腕上的计时仪器) 手表,或称为腕表,是指戴在手腕上,用以计时/显示时间的仪器,手表在英语里watch源自中世纪wacche这一词汇. 手表通常是利用皮革.橡胶.尼龙布.不锈钢等材料,制成 ...
- Linux理论小结
1.Linux是什么 2.Linux的种类 3.Linux的软件安装方法 4.Linux的软卸载方法 5.Linux的目录功能 1.Linux是什么 2.Linux的种类 3.Linux的软件安装方法 ...
- MySQL Case--Strict mode与NOT NULL
事故回溯 某业务流程操作为: 1.循环扫描某张待处理请求表,查看是否有请求等待处理. 2.找到待处理请求后,申请相关资源进行处理,并将处理结果插入到处理结果表中. 3.将该请求从待处理请求表中移除. ...
- HTTPS安全通信过程
前言:本文是的第三篇文章.第一篇文章<常见加密算法特点及适用场景>,介绍了常见加密算法及其适用的场景,对加密算法做一个总体的概述.第二篇文章<非对称加密算法-RSA算法&g ...