AngularJS: Animation trong AngularJS

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

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ụ

<body ng-app="myApp">

<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</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>

» Tiếp: Routing trong AngularJS
« Trước: Include trong AngularJS
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!