AngularJS学习--- 动画操作 (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指令,例如,如果过滤数据时,手机列表会动态的出现列表中.

1. starting class表示一个将要开始的动画
2. 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.