[AngularJS] Phần 21: Hoạt hình trong AngularJS

Cập nhật lần cuối: 23/09/2023 lúc 16:05:02

Với AngularJS và CSS, bạn có thể thực hiện các hiệu ứng hoạt hình.

Hoạt hình
Hoạt hình là sự chuyển đổi các phần tử HTML giúp bạn cảm nhận được chuyển động. Ví dụ khi nhấn “chọn” checkbox thì vùng DIV hiện, còn khi nhấn “bỏ chọn” thì vùng DIV ẩn đi.

<!DOCTYPE html>
<html>
<style>
div {
  transition: all linear 0.5s;
  background-color: yellow;
  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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>

<body ng-app="ngAnimate">

<h1>Nhấn chọn/bỏ chọn để ẩn/hiện vùng DIV --- dammio.com: <input type="checkbox" ng-model="myCheck"></h1>

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

</body>
</html>

Lưu ý: Một số hiệu ứng hoạt hình giúp người dùng tương tác với giao diện Web tốt hơn, tuy nhiên bạn không nên nên “lạm dụng” hoặc “sử dụng quá nhiều” hiệu ứng hoạt hình, khi đó người dùng sẽ bị phân tâm.

Các bước xây dựng hoạt hình
Bước 1: Nhúng thư viện hoạt hình AngularJS Animate ở câu lệnh sau:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>

Bước 2: Tạo module ngAnimate cho ứng dụng.

<body ng-app="ngAnimate">

Hoặc nếu ứng dụng của bạn có tên, hãy thêm module ngAnimate là một phần phụ thuộc vào module ứng dụng.

<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>

Bước 3: Thêm CSS định nghĩa phong cách cho giao diện, vậy là xong, đoạn mã hoàn chỉnh chính là ví dụ đầu tiên bài này.

Module ngAnimate
Module ngAnimate thêm/xóa các lớp. Module này không thực thi hiệu ứng hoạt hình cho các phần tử HTML, nhưng khi có sự kiện thông báo nào đó xảy ra, chẳng hạn như sự kiện hide (ẩn) và sự kiện show (hiện) của 1 phần tử HTML, module sẽ lấy một số lớp được định nghĩa trước để tạo các hiệu ứng hoạt hình.

Các chỉ thị trong AngularJS dùng để thêm/xóa các lớp là:

ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch

Hai chỉ thị ng-show và ng-hide dùng để thêm/xóa một giá trị lớp ng-hide. Các chỉ thị thêm một giá trị lớp ng-enter khi chúng vào DOM, và một thuộc tính ng-leave khi bị xóa khỏi DOM. Chỉ thị ng-repeat cũng thêm một giá trị lớp ng-move khi phần tử HTML thay đổi vị trí.

Liên quan: [AngularJS] Phần 11: AngularJS http

Thêm nữa, trong suốt quá trình hoạt hình, phần tử HTML sẽ có một tập các giá trị lớp, và sẽ bị xóa khi hiệu ứng hoạt hình hoàn thành. Ví dụ, chỉ thị ng-hide sẽ thêm các giá trị lớp sau:

ng-animate
ng-hide-animate
ng-hide-add (nếu phần tử sẽ bị ẩn)
ng-hide-remove (nếu phần tử sẽ hiện)
ng-hide-add-active (nếu phần tử sẽ bị ẩn)
ng-hide-remove-active (nếu phần tử sẽ hiện)

Hoạt hình dùng CSS
Các chuyển tiếp hay hoạt hình CSS có thể được dùng để thực thi hiệu ứng hoạt hình cho các phần tử HTML. Để học thêm về các hiệu ứng CSS, bạn có thể tìm series viết về CSS/CSS3 trong thời gian tới.

Chuyển tiếp CSS
Các chuyển tiếp CSS cho phép bạn thay đổi giá trị thuộc tính CSS một cách trơn tru, từ một giá trị này sang giá trị khác, trong khoảng thời gian cho trước.

Ví dụ khi phần tử DIV có giá trị lớp là .ng-class, diễn ra trong 5 giây, và chiều cao sẽ thay đổi từ 100px về 0.

<!DOCTYPE html>
<html>
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}

.ng-hide {
  height: 0;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>

<body ng-app="myApp">

<h1>Nhấn chọn/bỏ chọn để ẩn/hiện vùng DIV --- dammio.com: <input type="checkbox" ng-model="myCheck"></h1>

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

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>
</html>

Hiệu ứng hoạt hình CSS
Các hiệu ứng hoạt hình CSS cũng cho phép bạn thay đổi thuộc tính CSS mượt mà, từ một giá trị này sang giá trị khác, trong khoảng thời gian cho trước.

Ví dụ khi phần tử DIV có giá trị lớp là .ng-class, khi hiệu ứng hoạt hình myChange bắt đầu chạy, và chiều cao sẽ thay đổi mượt từ 100px về 0.

<!DOCTYPE html>
<html>
<style>
@keyframes myChange {
  from {
      height: 100px;
  } to {
      height: 0;
  }
}

div {
  height: 100px;
  background-color: lightblue;
}

div.ng-hide {
  animation: 0.5s myChange;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>

<body ng-app="ngAnimate">

<h1>Nhấn chọn/bỏ chọn để ẩn/hiện vùng DIV --- dammio.com: <input type="checkbox" ng-model="myCheck"></h1>

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

</body>
</html>

Kết luận: Bài viết đã trình bày cho các bạn về cách sử dụng một số hiệu ứng hoạt hình đơn giản trong CSS, mời bạn tiếp tục theo dõi bài tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [AngularJS] Phần 21: Hoạt hình trong AngularJS. https://www.dammio.com/2017/09/13/angularjs-phan-21-hoat-hinh-trong-angularjs.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[AngularJS] Phần 21: Hoạt hình trong AngularJS}, year = {2017}, url = {https://www.dammio.com/2017/09/13/angularjs-phan-21-hoat-hinh-trong-angularjs}, urldate = {2024-07-24} }

Kết nối