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.