แอนิเมชั่น AngularJS
AngularJS ให้เอฟเฟกต์ภาพเคลื่อนไหวที่สามารถใช้กับ CSS ได้
AngularJS ใช้แอนิเมชั่นเพื่อแนะนำไลบรารี Angular-Animate.min.js
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script>
คุณต้องใช้โมเดล nganimate ในแอปพลิเคชันของคุณ:
<body ng-app = "nganimate">
แอนิเมชั่นคืออะไร?
ภาพเคลื่อนไหวเป็นเอฟเฟกต์การเปลี่ยนแปลงแบบไดนามิกที่เกิดจากการเปลี่ยนองค์ประกอบ HTML
ตัวอย่าง
ช่องทำเครื่องหมายเพื่อซ่อน DIV:
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> div {การเปลี่ยนแปลง: linear ทั้งหมด 0.5s; พื้นหลังสี: LightBlue; ความสูง: 100px; ความกว้าง: 100%; ตำแหน่ง: ญาติ; ด้านบน: 0; ซ้าย: 0;}. ng-hide {ความสูง: 0; ความกว้าง: 0; พื้นหลังสี: โปร่งใส; ด้านบน: -200px; ซ้าย: 200px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <สคริปต์ src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> ng-hide = "mycheck"> </div> </body> </html>เอฟเฟกต์การทำงาน:
หมายเหตุ: ไม่ควรมีภาพเคลื่อนไหวมากเกินไปในแอปพลิเคชัน แต่การใช้ภาพเคลื่อนไหวที่เหมาะสมสามารถเพิ่มความร่ำรวยของหน้าเว็บและทำให้ผู้ใช้เข้าใจได้ง่ายขึ้น
หากแอปพลิเคชันของเราตั้งชื่อแอปพลิเคชันแล้วเราสามารถเพิ่ม nganimate โดยตรงในรุ่น:
ตัวอย่าง
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> div {การเปลี่ยนแปลง: linear ทั้งหมด 0.5s; พื้นหลังสี: LightBlue; ความสูง: 100px; ความกว้าง: 100%; ตำแหน่ง: ญาติ; ด้านบน: 0; ซ้าย: 0;}. ng-hide {ความสูง: 0; ความกว้าง: 0; พื้นหลังสี: โปร่งใส; ด้านบน: -200px; ซ้าย: 200px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <สคริปต์ src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> ng-hide = "mycheck"> </div> <script> var app = angular.module ('myapp', ['nganimate'])); </script> </body> </html>เอฟเฟกต์การทำงาน:
Nganimate ทำอะไร?
โมเดล Nganimate สามารถเพิ่มหรือลบคลาส
โมเดล Nganimate ไม่สามารถเคลื่อนไหวองค์ประกอบ HTML ได้ แต่ Nganimate จะตรวจสอบเหตุการณ์คล้ายกับการซ่อนและแสดงองค์ประกอบ HTML หากเหตุการณ์เกิดขึ้น Nganimate จะใช้คลาสที่กำหนดไว้ล่วงหน้ากับองค์ประกอบ HTML ที่เคลื่อนไหว
Directive AngularJS เพื่อเพิ่ม/ลบคลาส:
ng-show
ng-hide
อืม
ng-view
รวมถึง
การทำซ้ำ
ng-if
การสวิตช์
คำสั่ง NG-show และ ng-hide ใช้เพื่อเพิ่มหรือลบค่าของคลาส NG-hide
คำสั่งอื่น ๆ จะเพิ่มคลาส NG-enter เมื่อเข้าสู่ DOM และลบ DOM จะเพิ่มคุณสมบัติ NG-Leave
เมื่อตำแหน่งองค์ประกอบ HTML เปลี่ยนไปคำสั่ง NG-Repeat ยังสามารถเพิ่มคลาส NG-Move ได้
นอกจากนี้หลังจากแอนิเมชั่นเสร็จสมบูรณ์การรวบรวมคลาสขององค์ประกอบ HTML จะถูกลบออก ตัวอย่างเช่น: คำสั่ง ng-hide จะเพิ่มคลาสต่อไปนี้:
อานนท์
หอยลอน
ng-hide-add (ถ้าองค์ประกอบจะถูกซ่อน)
ng-hide-remove (ถ้าองค์ประกอบจะปรากฏ)
ng-hide-add-active (ถ้าองค์ประกอบจะถูกซ่อน)
ng-hide-remove-active (ถ้าองค์ประกอบจะปรากฏ)
ใช้แอนิเมชั่น CSS
เราสามารถใช้การเปลี่ยนแปลง CSS หรือแอนิเมชัน CSS เพื่อสร้างองค์ประกอบ HTML ที่เคลื่อนไหวได้ คุณสามารถอ้างถึงบทช่วยสอนการเปลี่ยน CSS ของเราและบทช่วยสอนแอนิเมชั่น CSS
การเปลี่ยนแปลง CSS
การเปลี่ยนแปลง CSS ช่วยให้เราสามารถปรับเปลี่ยนค่าแอตทริบิวต์ CSS ได้อย่างราบรื่นไปยังอีก:
ตัวอย่าง
เมื่อองค์ประกอบ DIV มีชุดคลาส.
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> div {การเปลี่ยนแปลง: linear ทั้งหมด 0.5s; พื้นหลังสี: LightBlue; ความสูง: 100px;}. ng-hide {ความสูง: 0;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> ng-hide = "mycheck"> </div> <script> var app = angular.module ('myapp', ['nganimate'])); </script> </body> </html>แอนิเมชั่น CSS
ภาพเคลื่อนไหว CSS ช่วยให้คุณสามารถปรับเปลี่ยนค่าคุณสมบัติ CSS ได้อย่างราบรื่น:
ตัวอย่าง
เมื่อคลาส. ng-hide ถูกตั้งค่าบนองค์ประกอบ div ภาพเคลื่อนไหว mychange จะถูกดำเนินการซึ่งจะเปลี่ยนความสูงอย่างราบรื่นจาก 100px เป็น 0:
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> @keyframes mychange {จาก {ความสูง: 100px; } ถึง {ความสูง: 0; }} div {ความสูง: 100px; พื้นหลังสี: lightblue;} div.ng-hide {แอนิเมชั่น: 0.5s mychange;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> ng-hide = "mycheck"> </div> </body> </html>ข้างต้นเป็นชุดข้อมูลเกี่ยวกับแอนิเมชั่น AngularJS โปรดดูหากคุณต้องการ