Hoạt hình AngularJS

Với sự hỗ trợ của CSS, AngularJS cung cấp hiệu ứng chuyển đổi.

Hiệu ứng động là gì?

Hiệu ứng động là sự thay đổi của các yếu tố HTML mang lại cảm giác chuyển động.

mô hình

Chọn hộp kiểm để ẩn DIV:

<body ng-app="ngAnimate">
Ẩn DIV:<input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

Thử ngay

Ứng dụng không nên bị lấp đầy bởi hiệu ứng động, nhưng một số hiệu ứng động có thể làm cho ứng dụng dễ hiểu hơn.

Tôi cần gì?

Để ứng dụng của bạn sẵn sàng cho hiệu ứng động, bạn phải bao gồm thư viện AngularJS Animate:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

Sau đó, bạn phải tham chiếu đến module trong ứng dụng của bạn. ngAnimate Module:

<body ng-app="ngAnimate">

Hoặc, nếu ứng dụng của bạn có tên, hãy đặt ngAnimate Thêm làm phụ thuộc của module ứng dụng:

mô hình

<body ng-app="myApp">
<h1>Ẩn DIV：<input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

Thử ngay

Vai trò của ngAnimate là gì?

ngAnimate Module thêm/xóa lớp.

ngAnimate Module này sẽ không làm cho yếu tố HTML của bạn animation, nhưng khi ngAnimate Khi chú ý đến một số sự kiện (như ẩn hoặc hiển thị yếu tố HTML), yếu tố đó sẽ nhận được một số lớp được định trước, và chúng có thể được sử dụng để tạo animation.

Các câu lệnh thêm/xóa lớp trong AngularJS bao gồm:

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

ng-show và ng-hide Câu lệnh thêm/xóa ng-hide Giá trị lớp.

Các câu lệnh khác sẽ thêm khi vào DOM: ng-enter Giá trị lớp, và sẽ thêm khi xóa khỏi DOM: ng-leave Thuộc tính.

Khi yếu tố HTML thay đổi vị trí,ng-repeat Câu lệnh này cũng sẽ thêm ng-move Giá trị lớp.

Ngoài ra, trong quá trình animation, yếu tố HTML sẽ có một tập hợp các giá trị lớp, và chúng sẽ bị xóa đi sau khi animation hoàn thành. Ví dụ:ng-hide Câu lệnh sẽ thêm các giá trị lớp sau:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Nếu muốn ẩn yếu tố)
  • ng-hide-remove(Nếu muốn hiển thị yếu tố)
  • ng-hide-add-active(Nếu muốn ẩn yếu tố)
  • ng-hide-remove-active(Nếu muốn hiển thị yếu tố)

Thực hiện animation bằng CSS

Chúng ta có thể sử dụng CSS Transition hoặc CSS Animation để thêm hiệu ứng động vào các yếu tố HTML. Bài học này sẽ hướng dẫn bạn về cả hai.

Để biết thêm thông tin về CSS Animation, hãy học các bài học CSS Transition và CSS Animation của chúng tôi.

CSS Transition

CSS Transition cho phép bạn trong khoảng thời gian给定, thay đổi từ một giá trị thuộc tính CSS một cách mượt mà sang giá trị khác:

mô hình

Khi phần tử DIV nhận được .ng-hide Khi thời điểm này, sự chuyển đổi sẽ diễn ra trong 0.5 giây, chiều cao sẽ mượt mà chuyển đổi từ 100px lên 0:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

Thử ngay

CSS animation

CSS animation cho phép bạn thay đổi giá trị thuộc tính CSS một cách mượt mà trong khoảng thời gian được chỉ định:

mô hình

Khi phần tử DIV nhận được .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

Thử ngay