AngularJS tut 22: AngularJS Animations

By DragonKnightMT Last updated Th11 9, 2021

AngularJS cung cấp các hiệu ứng chuyển tiếp hoạt hình, với sự trợ giúp từ CSS.

Animation là gì?

Hoạt ảnh là khi sự chuyển đổi của một phần tử HTML cho bạn ảo giác về chuyển động.

Thí dụ:

<body ng-app="ngAnimate">

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

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

</body>

Hãy tự mình thử »

Ứng dụng không nên chứa đầy hình ảnh động, nhưng một số hình ảnh động có thể giúp ứng dụng dễ hiểu hơn.

Tôi cần những gì?

Để làm cho các ứng dụng của bạn sẵn sàng cho hoạt ảnh, bạn phải bao gồm thư viện AngularJS Animate:

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

Sau đó, bạn phải tham khảo ngAnimatemô-đun trong ứng dụng của mình:

Hoặc nếu ứng dụng của bạn có tên, hãy thêm ngAnimatelàm phụ thuộc vào mô-đun ứng dụng của bạn:

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

Hãy tự mình thử »

NgAnimate Làm gì?

Mô-đun ngAnimate thêm và xóa các lớp.

Mô-đun ngAnimate không tạo hoạt ảnh cho các phần tử HTML của bạn, nhưng khi ngAnimate nhận thấy các sự kiện nhất định, như ẩn hoặc hiển thị một phần tử HTML, phần tử sẽ nhận được một số lớp được xác định trước có thể được sử dụng để tạo hoạt ảnh.

Các lệnh trong AngularJS thêm / bớt các lớp là:

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

Các lệnh ng-showvà ng-hidechỉ thị thêm hoặc bớt một ng-hidegiá trị lớp.

Các chỉ thị khác thêm một ng-entergiá trị lớp khi chúng nhập DOM và một ng-leavethuộc tính khi chúng bị xóa khỏi DOM.

Các ng-repeatchỉ thị cũng cho biết thêm một ng-movegiá trị lớp khi các yếu tố HTML thay đổi vị trí.

Ngoài ra, trong quá trình hoạt ảnh, phần tử HTML sẽ có một tập hợp các giá trị lớp, sẽ bị loại bỏ khi hoạt ảnh kết thúc. Ví dụ: ng-hidechỉ thị sẽ thêm các giá trị lớp này:

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ẽ được hiển thị)
ng-hide-add-active (nếu phần tử sẽ bị ẩn)
ng-hide-remove-active (nếu phần tử sẽ được hiển thị)

Ảnh động sử dụng CSS

Chúng ta có thể sử dụng chuyển tiếp CSS hoặc hoạt ảnh CSS để tạo hoạt ảnh cho các phần tử HTML. Hướng dẫn này sẽ cho bạn thấy cả hai.

Để tìm hiểu thêm về CSS Animation, hãy nghiên cứu Hướng dẫn chuyển đổi CSS và Hướng dẫn tạo ảnh động CSS của chúng tôi .

Chuyển tiếp CSS

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

Thí dụ:

Khi phần tử DIV nhận được .ng-hidelớp, quá trình chuyển đổi sẽ mất 0,5 giây và chiều cao sẽ thay đổi trơn tru từ 100px thành 0:

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

.ng-hide {
  height: 0;
}
</style>

Hãy tự mình thử »

Hoạt ảnh CSS

CSS Animations cho phép bạn thay đổi các giá trị thuộc tính CSS một cách dễ dàng, từ giá trị này sang giá trị khác, trong một khoảng thời gian nhất định:

Thí dụ:

Khi phần tử DIV nhận được .ng-hidelớp, myChange hoạt ảnh sẽ chạy, điều này sẽ thay đổi trơn tru chiều cao từ 100px thành 0:

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

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

div.ng-hide {
  animation: 0.5s myChange;
}
</style>

Hãy tự mình thử »