AngularJS: Animation trong AngularJS
AngularJS cũng cung cấp khả năng animation với sự trợ giúp từ CSS.
Animation là gì?
Animation ở đây là sự dịch chuyển của phần tử HTML tạo lên hiệu ứng di chuyển giả tưởng.
Ví dụ
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Không nên lạm dụng animation trong ứng dụng, chỉ nên sử dụng khi cần thiết để ứng dụng dể hiểu hơn.
Cách tạo animation
Trước tiên ta sử dụng thư viện Animate của AngularJS:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Sau đó ta phải tham chiếu tới module ngAnimate
trong ứng dụng:
<body ng-app="ngAnimate">
Hoặc nếu ứng dụng của ta đã có một tên thì ta thêm ngAnimate
như là một phụ thuộc trong module ứng dụng.
Ví dụ
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
ngAnimate sẽ làm gì?
Module ngAnimate sẽ thêm và xóa các class của CSS.
Module ngAnimate không làm các phần tử HTML hoạt động được, nhưng khi nó nhận diện được các sự kiện nhât định như ẩn hoặc hiện phần tử HTML, thì phần tử đó sẽ lấy một số class đã được định nghĩa từ trước để có thể thực hiện được hiệu ứng animate.
Các chỉ thị của AngularJS mà có thể thêm/xóa các class là:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
Các chỉ thị ng-show
và ng-hide
sẽ thêm hoặc xóa một giá trị class ng-hide
.
Các chỉ thị khác sẽ thêm giá trị class ng-enter
khi chúng được đưa vào DOM, và thêm thuộc tính ng-leave
khi chúng được xóa khỏi DOM.
Chỉ thị ng-repeat
cũng thêm giá trị class ng-move
khi phần tử HTML thay đổi vị trí.
Mặt khác, trong quá trình thực thi animation thì phần tử HTML sẽ có một tập các giá trị class, và tập này sẽ bị xóa khi animation kết thúc. Ví dụ, chỉ thị ng-hide
sẽ thêm những giá trị class sau đây:
ng-animate
ng-hide-animate
ng-hide-add
(nếu phần tử sẽ ẩn)ng-hide-remove
(nếu phần tử sẽ hiện)ng-hide-add-active
(nếu phần tử sẽ ẩn)ng-hide-remove-active
(nếu phần tử sẽ hiện)
Animation sử dụng CSS
Ta có thể sử dụng transition hoặc animation của CSS để tạo animate cho các phần tử HTML. This tutorial will show you both.
CSS Transition
CSS transition cho phép ta thay đổi các giá trị thuộc tính CSS một cách mượt mà.
Ví dụ
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
CSS Animation
CSS Animation cũng cho phép bạn thay đối các giá trị thuộc tính CSS một cách mượt mà.
Ví dụ
Khi phần tử <div> lấy class .ng-hide thì animation myChange sẽ chạy một cách mượt mà từ 100px tới 0.
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>