AngularJS là một khung JavaScript siêu anh hùng giúp tạo các Ứng dụng Trang Đơn (SPA) rất dễ dàng. Trên hết, AngularJS đi kèm với một số mô-đun góc cạnh có thể được sử dụng để tạo ra trải nghiệm người dùng tuyệt vời. Trong bài đăng này, chúng ta sẽ xem cách sử dụng ngAnimate phổ biến để thêm chuyển đổi trang / hoạt ảnh vào chế độ xem góc.
ngAnimate có thể được sử dụng với nhiều lệnh khác nhau như ngRepeat, ngView, ngInclude, ngIf, ngMessage, v.v.
Trong bài viết này, chúng tôi sẽ sử dụng ảnh động với ngView
Ở đây chúng tôi đang sử dụng Brackets IDE từ Adobe, nhưng bạn có thể tự do sử dụng những người khác, ví dụ: Sublime Text, WebStorm từ JetBrains, v.v.
Ghi chú : Chúng tôi cũng sẽ sử dụng API Bootswatch Bootstrap để cung cấp cho các trang HTML của chúng tôi một giao diện đẹp
Cấu trúc dự án:
Dưới đây là cấu trúc dự án trong Brackets IDE
Đây là mô tả ngắn của từng tệp được sử dụng trong dự án
animation.css - tệp CSS chính nơi chúng tôi xác định hoạt ảnh trang của mình
bootstrap.min.css - bootstrap đồng hồ ủng để tặng gắn thẻ một cái nhìn đẹp
config.js - tệp JavaScript chính nơi chúng tôi xác định mô-đun góc cạnh của chúng tôi cùng với các tuyến đường và bộ điều khiển
shellPage.html - Đây là trang shell trong đó các chế độ xem khác sẽ được tải động
view1.html, view2.html, view3.html - Đây là các chế độ xem từng phần sẽ được tải vào shellPage
Các hoạt ảnh được áp dụng như thế nào:
ngAnimate áp dụng các lớp CSS cho các chỉ thị Angular khác nhau tùy thuộc vào việc chúng đang vào hay rời khỏi dạng xem
.ng-enter - Lớp CSS này áp dụng trên chỉ thị bất cứ khi nào nó được tải trong trang
.ng-bỏ đi - Lớp CSS này áp dụng trên chỉ thị bất cứ khi nào nó rời khỏi trang
Hãy xem qua từng tệp một
shellPage.html
shellPage tải các tài nguyên cần thiết, áp dụng ng-app vào body và thêm ng-view để đưa các chế độ xem động vào.
config.js
Trong tệp cấu hình, chúng tôi xác định mô-đun góc cạnh của chúng tôi cùng với các tuyến đường và bộ điều khiển.
Chuyển đổi mô-đun Ứng dụng có hai phụ thuộc: ngAnimate và ngRoute
var transferApp = angle.module ('transferApp', ['ngAnimate', 'ngRoute']) transferApp.config (function ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , controller: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', controller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', controller:' view3Controller '})}) transferApp.controller (' view1Controller ', function ($ scope) {$ scope.cssClass =' view1 '}) transferApp.controller (' view2Controller ', function ($ scope) { $ scope.cssClass = 'view2'}) transferApp.controller ('view3Controller', function ($ scope) {$ scope.cssClass = 'view3'})Chúng tôi đã xác định ba chế độ xem từng phần (view1, view2, view3) sẽ được đưa vào shellpage tùy thuộc vào URL. Bộ điều khiển tương ứng đặt một thuộc tính cssClass, là tên của lớp CSS, sẽ được áp dụng cho ng-view. Chúng tôi sẽ xác định các hoạt ảnh của chúng tôi trong các lớp CSS này sẽ tải mỗi trang với các hoạt ảnh khác nhau.
Các trang một phần view1.html, view2.html, view3.html
Không có gì nhiều trong các trang một phần, chỉ một số văn bản và liên kết đến các chế độ xem khác
view1.html
Đây là View 1
Xem 2 Xem 3
view2.html
Đây là View 2
Xem 1 Xem 3
view3.html
Đây là View 3
Xem 1 Xem 2
Hãy nhớ rằng ba tệp HTML này là một phần các trang sẽ được đưa vào shellPage.html theo URL mà chúng tôi đã xác định trong tệp config.js
Xác định kiểu và hoạt ảnh:
Hãy đưa một số cuộc sống vào quan điểm của chúng tôi bằng cách áp dụng CSS cho nó
khung điều khiển dữ liệu trong selen
.view {bottom: 0 padding-top: 200px position: precision text-align: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { color: # 333 position: Absolute text-align: center top: 50px width: 100%} / * Màu nền và văn bản cho các trang xem một phần (view1, view2, view3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Để thực hiện chuyển đổi rõ ràng giữa các chế độ xem khác nhau, chúng tôi sẽ đặt thuộc tính CSS z-index
.view.ng-left {z-index: 9999} .view.ng-enter {z-index: 8888}Bây giờ đã đến lúc xác định hoạt ảnh của chúng ta
Trượt hoạt ảnh trái
/ * trượt ra bên trái * / @keyframes slideOutLeft {đến {biến đổi: translateX (-100%)}} @ -moz-keyframes slideOutLeft {sang {-moz-biến đổi: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {đến {-webkit-biến đổi: translateX (-100%)}}Tăng tỷ lệ hoạt ảnh
/ * tăng tỷ lệ * / @keyframes scaleUp {from {opacity: 0.3 converter: scale (0.8)}} @ -moz-keyframes scaleUp {từ {opacity: 0.3 -moz-variable: scale (0.8)}} @ -webkit- keyframes scaleUp {from {opacity: 0.3 -webkit-converter: scale (0.8)}}Trượt vào từ hoạt ảnh bên phải
/ * trượt vào từ bên phải * / @keyframes slideInRight {từ {biến đổi: translateX (100%)} sang {biến đổi: translateX (0)}} @ -moz-keyframes slideInRight {từ {-moz-biến đổi: translateX (100 %)} thành {-moz-biến đổi: translateX (0)}} @ -webkit-keyframes slideInRight {từ {-webkit-biến đổi: translateX (100%)} thành {-webkit-biến đổi: translateX (0)}}Trượt vào từ Hoạt ảnh dưới cùng
/ * trượt vào từ dưới cùng * / @keyframes slideInUp {từ {biến đổi: dịchY (100%)} sang {biến đổi: dịchY (0)}} @ -moz-keyframes slideInUp {từ {-moz-biến đổi: dịchY (100 %)} thành {-moz-biến đổi: translateY (0)}} @ -webkit-keyframes slideInUp {từ {-webkit-biến đổi: translateY (100%)} thành {-webkit-biến đổi: translateY (0)}}Xoay và Thu hoạt ảnh
/ * xoay và rơi * / @ -webkit-keyframes xoayFall {0% {-webkit-biến đổi: xoayZ (0deg)} 20% {-webkit-biến đổi: xoayZ (10deg) -webkit-animation-timing-function: easy- out} 40% {-webkit-biến đổi: xoayZ (17deg)} 60% {-webkit-biến đổi: xoayZ (16deg)} 100% {-webkit-biến đổi: translateY (100%) xoayZ (17deg)}} @ -moz -keyframes xoayFall {0% {-moz-biến đổi: xoayZ (0deg)} 20% {-moz-biến đổi: xoayZ (10deg) -moz-animation-timing-function: easy-out} 40% {-moz-biến đổi: xoayZ (17deg)} 60% {-moz-biến đổi: xoayZ (16deg)} 100% {-moz-biến đổi: translateY (100%) xoayZ (17deg)}} @keyframes xoayFall {0% {biến đổi: xoayZ (0deg) } 20% {biến đổi: xoayZ (10deg) animation-timing-function: easy-out} 40% {biến đổi: xoayZ (17deg)} 60% {biến đổi: xoayZ (16deg)} 100% {biến đổi: translateY (100%) xoayZ (17deg)}}Xoay hình ảnh động trên báo
/ * xoay tờ báo * / @ -webkit-keyframes xoayOutNewspaper {thành {-webkit-biến đổi: translateZ (-3000px) xoayZ (360deg) Độ mờ: 0}} @ -moz-keyframes xoayOutNewspaper {thành {-moz-biến đổi: translateZ Độ mờ (-3000px) xoayZ (360deg): 0}} @keyframes xoayOutNewspaper {thành {biến đổi: translateZ (-3000px) Độ mờ xoayZ (360deg): 0}}Áp dụng hoạt ảnh:
Đã đến lúc áp dụng các hoạt ảnh mà chúng ta đã xác định trước đó
Xem 1 ảnh động
/ * Xem 1 hoạt ảnh để rời trang và nhập * / .view1.ng-left {-webkit-animation: slideOutLeft 0,5 giây vừa dễ dàng trong -moz-animation: slideOutLeft 0,5 giây vừa dễ dàng trong hoạt ảnh: slideOutLeft 0,5 giây cả hai đều dễ dàng -in} .view1.ng-enter {-webkit-animation: scaleUp 0,5 giây vừa dễ-in -moz-animation: scaleUp 0,5 giây cho cả hoạt ảnh dễ in: scaleUp 0,5 giây vừa dễ-in}Xem 2 hoạt ảnh
/ * Xem 2 hoạt ảnh để rời trang và nhập * / .view2.ng-left {-webkit-transform-origin: 0% 0% -webkit-animation: xoayFall 1s đều easy-in -moz-variable-origin: 0% 0% -moz-animation: xoayFall 1s vừa dễ dàng trong biến đổi-origin: 0% 0% hoạt ảnh: xoayFall 1s vừa dễ dàng} .view2.ng-enter {-webkit-animation: slideInRight 0,5 giây vừa dễ dàng - moz-animation: slideInRight 0,5 giây cả hoạt ảnh dễ in: slideInRight 0,5 giây vừa dễ dàng}Xem 3 hoạt ảnh
/ * Xem 3 hoạt ảnh để rời trang và nhập * / .view3.ng-left {-webkit-biến-gốc: 50% 50% -webkit-hoạt hình: xoayOutNewspaper .5s đều dễ-in -moz-biến đổi-origin: 50 % 50% -moz-animation: xoayOutNewspaper .5s vừa dễ dàng trong biến đổi-origin: 50% 50% hoạt ảnh: xoayOutNewspaper .5s vừa dễ dàng} .view3.ng-enter {-webkit-animation: slideInUp 0,5 giây đều dễ dàng -in -moz-animation: slideInUp 0,5 giây cả hoạt ảnh dễ in: slideInUp 0,5 giây cả hai cách dễ dàng}Chúng tôi đã hoàn thành với tất cả các thay đổi. Bây giờ đã đến lúc chạy ứng dụng
Chạy ứng dụng
Khi chạy ứng dụng, bạn sẽ thấy trang bên dưới:
Nhấp vào các liên kết và bạn sẽ thấy các hoạt ảnh đang phát, khi vào và rời các trang một phần.
Có nhiều hình ảnh động khác có thể được sử dụng. Ngoài ra, một loạt các hiệu ứng có thể có ở đây: http://tympanus.net/Development/PageTransitions/
Tải xuống mã và tự mình thử
[buttonleads form_title = ”Download Code” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Tải xuống Code”]
Tôi hy vọng bạn thích Animation ở trên với blog ngAnimate. Nếu bạn muốn tìm hiểu sâu về Angular JS, tôi sẽ khuyên bạn tại sao không xem trang khóa học. Khóa đào tạo Chứng chỉ Angular JS tại Edureka sẽ giúp bạn trở thành chuyên gia về Angular JS thông qua các buổi hướng dẫn trực tiếp của người hướng dẫn và đào tạo thực hành bằng các trường hợp sử dụng thực tế.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần bình luận và chúng tôi sẽ liên hệ lại với bạn.
Bài viết liên quan:
Phân tích cú pháp các tệp XML bằng SAX Parser