动画操作 (Applying Animations) ngAnimate12
动画操作 (Applying Animations) ngAnimate step 12
1.切换目录
git checkout step-12
npm start
2.效果图
这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程.
3.代码实现:
step11和step12之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-11...step-12
Dependencies(依赖的js库):
bower.json
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "1.2.x",
"angular-mocks": "~1.2.x",
"bootstrap": "~3.1.1",
"angular-route": "~1.2.x",
"angular-resource": "~1.2.x",
"jquery": "1.10.2",
"angular-animate": "~1.2.x"
}
}
注:angular-animate需要单独下载,这里使用命令npm install或者 bower install即可下载 angular-animate.js
如果需要更多动画可以结合Jquery中的动画去实现需求.
angularjs中是如何实现动画的? 可以参考API:https://docs.angularjs.org/guide/animations
Template(模板)
首先,引入angular-animate.js文件,如下:
...
<!-- for CSS Transitions and/or Keyframe Animations -->
<link rel="stylesheet" href="css/animations.css">
...
<!-- jQuery is used for JavaScript animations (include this before angular.js) -->
<script src="bower_components/jquery/jquery.js"></script>
...
<!-- required module to enable animation support in AngularJS -->
<script src="bower_components/angular-animate/angular-animate.js"></script> <!-- for JavaScript Animations -->
<script src="js/animations.js"></script> ...
其API可以参考:ngAnimate
Module & Animations(组件和动画)
app/js/animations.js
.
angular.module('phonecatAnimations', ['ngAnimate']);
// ...
// this module will later be used to define animations
// ...
app/js/app.js
// ...
angular.module('phonecatApp', [
'ngRoute', 'phonecatAnimations',
'phonecatControllers',
'phonecatFilters',
'phonecatServices',
]);
// ...
现在,动画效果已经被唤醒了.
Animating ngRepeat with CSS Transition Animations(使用CSS过渡效果去实现动画效果)
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
class="thumbnail phone-listing">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
app/css/animations.css
.phone-listing.ng-enter,
.phone-listing.ng-leave,
.phone-listing.ng-move {
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
} .phone-listing.ng-enter,
.phone-listing.ng-move {
opacity: 0;
height: 0;
overflow: hidden;
} .phone-listing.ng-move.ng-move-active,
.phone-listing.ng-enter.ng-enter-active {
opacity: 1;
height: 120px;
} .phone-listing.ng-leave {
opacity: 1;
overflow: hidden;
} .phone-listing.ng-leave.ng-leave-active {
opacity: 0;
height: 0;
padding-top: 0;
padding-bottom: 0;
}
这里都是通过class去定位元素的,那么class是何时被创建的?
- ng-enter class 主要用于新添加的手机并渲染到页面中.
- ng-move class 主要用于当元素被移动时.
- ng-leave class主要用于被删除时.
手机列表被添加和删除依赖于ng-repeat指令,例如,如果过滤数据时,手机列表会动态的出现列表中.
- starting class表示一个将要开始的动画
- active class 表示一个将要结束的动画
在我们上面的例子中,元素的高度变化从0到120像素当手机被添加和移除时,同样有一个淡入淡出的效果,所有这些效果都是CSS transitions (CSS 转换器)实现的.CSS transitions 和 CSS animations对于目前主流的浏览器绝大部分都有着很好的支持,除了IE 9及其更低版本,如果想要一些动画效果可以尝试基本Javascript的动画.
ngView
app/index.html
.
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
With this change, the ng-view
directive is nested inside a parent element with a view-container
CSS class. This class adds aposition: relative
style so that the positioning of the ng-view
is relative to this parent as it animates transitions.
这里使用ng-view代替ng-repeat,在这里,ng-view指令被嵌套入一个view-container CSS类,这个类(class)添加了一个相对路径以便其动画效果可以动态显现.下面将看其动画的具体实现:
app/css/animations.css
.
.view-container {
position: relative;
} .view-frame.ng-enter, .view-frame.ng-leave {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
} .view-frame.ng-enter {
-webkit-animation: 0.5s fade-in;
-moz-animation: 0.5s fade-in;
-o-animation: 0.5s fade-in;
animation: 0.5s fade-in;
z-index: 100;
} .view-frame.ng-leave {
-webkit-animation: 0.5s fade-out;
-moz-animation: 0.5s fade-out;
-o-animation: 0.5s fade-out;
animation: 0.5s fade-out;
z-index:99;
} @keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
} @keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@-moz-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@-webkit-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
使用ngClass结合Javascript来实现动画效果
app/partials/phone-detail.html
<div class="phone-images">
<img ng-src="{{img}}"
class="phone"
ng-repeat="img in phone.images"
ng-class="{active:mainImageUrl==img}">
</div> <h1>{{phone.name}}</h1> <p>{{phone.description}}</p> <ul class="phone-thumbs">
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-mouseenter="setImage(img)">
</li>
</ul>
动画的原理是在于"动",主要是位置或形态的改变产生的动的画面的过程.
其CSS样式如下:
app/css/app.css
.phone-images {
background-color: white;
width: 450px;
height: 450px;
overflow: hidden;
position: relative;
float: left;
} ... img.phone {
float: left;
margin-right: 3em;
margin-bottom: 2em;
background-color: white;
padding: 2em;
height: 400px;
width: 400px;
display: none;
} img.phone:first-child {
display: block;
}
这里主要用的是Jquery里的动画实现的,可以查看其API 查看更多动画: jQuery documentation.
动画操作 (Applying Animations) ngAnimate12的更多相关文章
- AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12
1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的 ...
- jQuery的一些基本的函数和用jQuery做一些动画操作
jQuery是对js的封装,因为js有一些不方便的地方.所以,jQuery才会去对js进行封装. jQuery对于标签元素的获取 $('div')或$('li') <!DOCTYPE html& ...
- Canvas组件:画布,可以实现动画操作。
Module 10 Canvas组件:画布,可以实现动画操作. TextArea:文本域. 在单行文本域中回车会激发ActionEvent. 用CheckBoxGroup实现单选框功能. Java中 ...
- Canvas组件:画布,可以实现动画操作
Canvas组件:画布,可以实现动画操作. TextArea:文本域. 在单行文本域中回车会激发ActionEvent. 用CheckBoxGroup实现单选框功能. Java中,单选框和复选框都是使 ...
- jQuery基础--动画操作
三组基本动画 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...
- Jquery基础之动画操作
Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show() ...
- 10 个非常实用的 SVG 动画操作JavaScript 库
SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些 ...
- Jquery动画操作的stop()函数
今天做一个点击动画时,遇到了当快速连续点击时,动画效果会乱,并不是我们想要达到的效果. 查询了一下,确认是动画累积的原因.网上搜了一下,发现jquery 的stop()函数刚好能解决. stop(cl ...
- jquery事件和动画操作集锦
一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){ //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...
随机推荐
- 设计模式C++实现_1_Singleton设计模式(简单的实现)
Singleton设计模式 思路如以下: Single.h #pragma once #include <iostream> #include <string> using n ...
- java回调机制及其实现(转)
1. 什么是回调函数 回调函数,顾名思义,用于回调的函数.回调函数只是一个功能片段,由用户按照回调函数调用约定来实现的一个函数.回调函数是一个工作流的一部分,由工作流来决定函数的调用(回调)时机.回调 ...
- Redis集群环境安装指南
环境 RHLinux-6.4-64-EN, 红帽6.4 64位,英文正式公布版. Redis3.0.0 redis2.x版本号还不支持集群,3.0版本号将会支持,如今3.0版本号还在开发中,如今是be ...
- Drupal 7.31 SQL注射分析POC
此漏洞昨日爆发 ,我们有时间去看看今天的代码. 于Drupal于,跑sql声明使用PDO型号,这是一般能够避免大部分的注射,由于使用占位符的sql语法语句是限制. 但是,这并不意味着绝对安全,. 在D ...
- HDU 1203 I NEED A OFFER!(dp)
Problem Description Speakless很长时间,我想出国.现在,他已经完成了所有需要的检查.准备好所有要准备的材料,于是,便须要去申请学校了.要申请国外的不论什么大学.你都要交纳一 ...
- 用fildder 查看loveuv 刷流量时通信的数据
loveuv是一个用来刷网页流量的站点,以下介绍怎么查看它刷流量时数据的传输 首先是注冊页面,邀请码UBMNEY 注冊账号登陆后,在账户资料页面http://www.loveuv.com/user/m ...
- Ubuntu 12.04 64bit 安装编译GCC 4.1.2 绝对原创
1. 下载并解压源代码: wget http://mirrors.ustc.edu.cn/gnu/gcc/gcc-4.1.2/gcc-4.1.2.tar.bz2 tar jxvf gcc-4.1.2. ...
- Linux开发环境的搭建和使用——Linux本必备软件SSH
SSH 至 Secure Shell 缩写.由 IETF 网络工作组(Network Working Group)开发:SSH 以建立应用层和传输层安全协议中的基础上. SSH 是眼下较可靠,专为远程 ...
- 完整具体解释GCD系列(二)dispatch_after;dispatch_apply;dispatch_once
原创Blog,转载请注明出处 本文阅读的过程中,如有概念不懂,请參照前专栏中之前的文章,假设还有疑惑,请留言. 这是我关于GCD专栏的地址 http://blog.csdn.net/column/de ...
- DDD分层架构的进化
.NET逻辑分层架构演示:DDD分层架构的进化 概述: 架构是高层的设计,如果设计和理解有误,必将在实现时带来各种问题.架构又是最稳定的,不会因为各种具体技术的依赖,如各种UI框架.ORM框架.I ...