Hoạt hình AngularJS
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.
Hoạt hình là gì?
Hoạt ảnh là khi việc chuyển đổi một phần tử HTML mang lại cho bạn ảo giác về chuyển động.
Ví dụ:
Chọn hộp kiểm để ẩn DIV:
<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 hoạt ảnh, nhưng một số hoạt ảnh có thể làm cho ứng dụng dễ hiểu hơn.
Tôi cần những gì?
Để làm cho ứ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 mô-đun ngAnimate trong ứng dụng của mình:
<body ng-app="ngAnimate"> Hoặc nếu ứng dụng của bạn có tên, hãy thêm ngAnimate làm phần phụ thuộc trong mô-đun ứng dụng của bạn:
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> 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 một số sự kiện nhất định, như ẩn hoặc hiển thị 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/xóa các lớp là:
-
ng-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
Lệnh ng-show và ng-hide thêm hoặc xóa giá trị lớp ng-hide .
Các lệnh khác thêm giá trị lớp ng-enter khi chúng vào DOM và thuộc tính ng-leave khi chúng bị xóa khỏi DOM.
Lệnh ng-repeat cũng thêm giá trị lớp ng-move khi phần 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, giá trị này sẽ bị xóa khi hoạt ảnh kết thúc. Ví dụ: lệnh ng-hide 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ị)
Hoạt ảnh 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 hiệu ứng 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 hoạt hình CSS của chúng tôi.
Chuyển tiếp CSS
Chuyển tiếp 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:
Ví dụ:
Khi phần tử DIV có lớp .ng-hide , 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 trơn tru, từ giá trị này sang giá trị khác, trong một khoảng thời gian nhất định:
Ví dụ:
Khi phần tử DIV có lớp .ng-hide , hoạt ảnh myChange sẽ chạy, thay đổi chiều cao từ 100px thành 0 một cách trơn tru:
<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ử »