AngularJS動畫 | 網頁設計教學

AngularJS 提供瞭動畫效果，可以配合 CSS 使用。AngularJS 使用動畫需要引入 angular-animate.min.js 庫。

<script src="https://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

還需在應用中使用模型 ngAnimate：

<body ng-app="ngAnimate">

1、什麼是動畫？

動畫是通過改變 HTML 元素產生的動態變化效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
 
.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">
<h3>隱藏 DIV: <input type="checkbox" ng-model="myCheck"></h3>
<p ng-hide="myCheck"></p>
</body>
</html>

DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { transition: all linear 0.5s; background-color: lightblue; height: 100px; width: 100%; position: relative; top: 0; left: 0; } .ng-hide { height: 0; width: 0; background-color: transparent; top:-200px; left: 200px; } </style> <script src="js/angular.min.js"></script> <script src="js/angular-animate.min.js"></script> </head> <body ng-app="myApp"> <h3>隱藏 DIV: <input type="checkbox" ng-model="myCheck"></h3> <p ng-hide="myCheck"></p> <script> var app = angular.module('myApp', ['ngAnimate']); </script> </body> </html>

2、ngAnimate 做瞭什麼?

ngAnimate 模型可以添加或移除 class 。ngAnimate 模型並不能使 HTML 元素產生動畫，但是 ngAnimate 會監測事件，類似隱藏顯示 HTML 元素，如果事件發生 ngAnimate 就會使用預定義的 class 來設置 HTML 元素的動畫。AngularJS 添加/移除 class 的指令:ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch。

（1）、ng-class指定 HTML 元素使用的 CSS 類

ng-class 指令用於給 HTML 元素動態綁定一個或多個 CSS 類。ng-class 指令的值可以是字符串，對象，或一個數組。如果是字符串，多個類名使用空格分隔。如果是對象，需要使用 key-value 對，key 是一個佈爾值，value 為你想要添加的類名。隻有在 key 為 true 時類才會被添加。如果是數組，可以由字符串或對象組合組成，數組的元素可以是字符串或對象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.js"></script>
<style>
.sky {
    color:white;
    background-color:lightblue;
    padding:20px;
    font-family:"Courier New";
}
.tomato {
    background-color:coral;
    padding:40px;
    font-family:Verdana;
}
</style>
</head>
<body ng-app="">
<span>選擇一個類:</span>
<select ng-model="home">
<option value="sky">天空色</option>
<option value="tomato">番茄色</option>
</select>
<p ng-class="home">
  <h3>Welcome Home!</h3>
  <h4>I like it!</h4>
</p>
</body>
</html>

（2）、ng-class-even類似 ng-class，但隻在偶數行起作用；ng-class-odd 類似 ng-class，但隻在奇數行起作用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<style>
.stripedeven {
    color:white;
    background-color:cyan;
}
.stripedodd{
  color:white;
    background-color:yellowgreen;
}
</style>
</head>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1px">
<tr>
  <th>Name</th>
  <th>Country</th>
</tr>
<tr ng-repeat="x in records" ng-class-even="'stripedeven'" ng-class-odd="'stripedodd'">
  <td>{{x.Name}}</td>
  <td>{{x.Country}}</td>  
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany"
    },
    {
      "Name" : "Berglunds snabbk",
      "Country" : "Sweden"
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico"
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria"
    }
  ]
});
</script>
</body>
</html>

（3）、ng-if如果條件為 false 移除 HTML 元素

ng-if 指令用於在表達式為 false 時移除 HTML 元素。如果 if 語句執行的結果為 true，會添加移除元素，並顯示。ng-if 指令不同於 ng-hide， ng-hide 隱藏元素，而 ng-if 是從 DOM 中移除元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="" ng-init="myVar = true">
<h3>保留 HTML: <input type="checkbox" ng-model="myVar" ></h3>
<p ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</p>
<p>當復選框取消選中時 DIV 元素將移除。</p>
<p>當重新選中復選框，DIV 元素會重新顯示。</p>
</body>
</html>

（4）、ng-checked規定元素是否被選中

ng-checked 指令用於設置復選框(checkbox)或單選按鈕(radio)的 checked 屬性。如果 ng-checked 屬性返回 true，復選框(checkbox)或單選按鈕(radio)將會被選中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="">
    <h3>My cars:</h3>
    <input type="checkbox" ng-model="all"> Check all<br>
    <input type="checkbox" ng-checked="all">Volvo<br>
    <input type="checkbox" ng-checked="all">Ford<br>
    <input type="checkbox" ng-checked="all">Mercedes
    <h3>點擊 "Check all" 選擇所有的車。</h3>
</body>
</html>

3、使用 CSS 動畫

我們可以使用 CSS transition(過渡) 或 CSS 動畫讓 HTML 元素產生動畫效果。

（1）、CSS 過渡

CSS 過渡可以讓我們平滑的將一個 CSS 屬性值修改為另外一個：在 DIV 元素設置瞭 .ng-hide 類時，過渡需要花費 0.5 秒，高度從 100px 變為 0。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<style>
p {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>
</head>
<body ng-app="myApp">
<h1>隱藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<p ng-hide="myCheck"></p>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>

（2）、CSS 動畫

CSS 動畫允許你平滑的修改 CSS 屬性值:在 DIV 元素設置瞭 .ng-hide 類時, myChange 動畫將執行，它會平滑的將高度從 100px 變為 0。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<style>
@keyframes myChange {
  from {
      height: 100px;
  } to {
      height: 10;
  }
}
p {
  height: 100px;
  background-color: lightblue;
}
p.ng-hide {
  animation: 10s myChange;
}
</style>
</head>
<body ng-app="ngAnimate">
隱藏 DIV: <input type="checkbox" ng-model="myCheck">
<p ng-hide="myCheck">
</p>
</body>
</html>

1、什麼是動畫？

2、ngAnimate 做瞭什麼?

3、使用 CSS 動畫

Related posts:

發佈留言 取消回覆

發佈留言取消回覆