标签:des style blog class c code
git checkout step-12
npm start
这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程.
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-repeat指令,例如,如果过滤数据时,手机列表会动态的出现列表中.
在我们上面的例子中,元素的高度变化从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.
AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12,布布扣,bubuko.com
AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12
标签:des style blog class c code
原文地址:http://www.cnblogs.com/amosli/p/3729083.html