คำนำ
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">
1. แอนิเมชั่นคืออะไร?
ภาพเคลื่อนไหวเป็นเอฟเฟกต์การเปลี่ยนแปลงแบบไดนามิกที่เกิดจากการเปลี่ยนองค์ประกอบ HTML
<! 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 = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> </head> <body ng-app = "nganimate"> <h3> 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 = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> </head> <body ng-app = "myApp"> <h3> ng-hide = "mycheck"> </div> <script> var app = angular.module ('myapp', ['nganimate'])); </script> </body> </html>2. Nganimate ทำอะไร?
โมเดล ngAnimate สามารถเพิ่มหรือลบคลาส โมเดล ngAnimate ไม่สามารถเคลื่อนไหวองค์ประกอบ HTML ได้ แต่ ngAnimate จะตรวจสอบเหตุการณ์คล้ายกับการซ่อนและแสดงองค์ประกอบ HTML หากเหตุการณ์เกิดขึ้น ngAnimate จะใช้คลาสที่กำหนดไว้ล่วงหน้ากับองค์ประกอบ HTML ที่เคลื่อนไหว คำสั่ง AngularJS เพื่อเพิ่ม/ลบคลาส: ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch
(1) NG-Class ระบุคลาส CSS ที่ใช้โดยองค์ประกอบ HTML
คำสั่ง ng-class ใช้เพื่อผูกคลาส CSS หนึ่งคลาสขึ้นไปกับองค์ประกอบ HTML ค่าของคำสั่ง ng-class สามารถเป็นสตริงวัตถุหรืออาร์เรย์ หากเป็นสตริงชื่อคลาสหลายคลาสจะถูกคั่นด้วยช่องว่าง หากเป็นวัตถุคุณต้องใช้คู่ คีย์-ค่า ซึ่งเป็นค่าบูลีน และค่าคือชื่อคลาสที่คุณต้องการเพิ่ม คลาสจะถูกเพิ่มเฉพาะในกรณีที่ คีย์เป็นจริง หากเป็นอาร์เรย์ก็สามารถประกอบด้วยสตริงหรือการรวมกันของวัตถุและองค์ประกอบของอาร์เรย์อาจเป็นสตริงหรือวัตถุ
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "js/Angular-animate.js" พื้นหลังสี: LightBlue; Padding: 20px; Font-Family: "Courier ใหม่";}. มะเขือเทศ {พื้นหลังสี: ปะการัง; Padding: 40px; Font-Family: verdana;} </style> </head> <body ng-app = ""> <pan> เลือกคลาส: </span> <เลือก ng-model = "home"> <ตัวเลือกค่า = "Sky"> Sky สี </optup> มัน! </h4> </div> </body> </html>(2) NG-Class-Even นั้นคล้ายกับ NG-Class แต่ใช้งานได้กับบรรทัดเท่านั้น NG-Class-Odd นั้นคล้ายกับ NG-Class แต่ใช้งานได้กับบรรทัดแปลก ๆ เท่านั้น NG-Class-Odd นั้นคล้ายกับ NG-Class แต่ใช้งานได้กับบรรทัดแปลก ๆ เท่านั้น
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <style>. พื้นหลังสี: Cyan;}. Stripedodd {Color: White; พื้นหลังสี: YellowGreen;} </style> </head> <body ng-app = "myapp"> <table ng-controller = "myctrl"> <tr> <th> ชื่อ </th> <th> ประเทศ </th> </tr> <tr ng-repeate ng-class-odd = "'stripedodd'"> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> $ scope.records = [{"ชื่อ": "Alfreds Futterkiste", "Country": "Germany"}, {"Name": "Berglunds Snabbk", "Country": "Sweden"}, {"Name": "ออสเตรีย"}]}); </script> </body> </html>(3) ng-ถ้าเงื่อนไขเป็นเท็จลบองค์ประกอบ HTML
คำสั่ง ng-if ใช้เพื่อลบองค์ประกอบ HTML เมื่อนิพจน์เป็นเท็จ หากผลลัพธ์ของการดำเนินการของคำสั่ง IF เป็นจริงองค์ประกอบที่ถูกลบจะถูกเพิ่มและแสดง คำสั่ง ng-if นั้นแตกต่างจาก ng-hide ng-hide ซ่อนองค์ประกอบในขณะที่ ng-if ลบองค์ประกอบออกจาก DOM
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> </head> ng-model = "myVar"> </h3> <div ng-if = "myVar"> <h1> ยินดีต้อนรับ </h1> <p> ยินดีต้อนรับสู่บ้านของฉัน </p> <hr> </div> <p> องค์ประกอบ DIV จะถูกลบออกเมื่อไม่มีการตรวจสอบ </p> <p> เมื่อมีการเลือกช่องทำเครื่องหมายอีกครั้งองค์ประกอบ DIV จะถูกแสดงอีกครั้ง </p> </body> </html>
(4) ตรวจสอบ NG ระบุว่าองค์ประกอบถูกเลือก
คำสั่ง ng-checked ใช้เพื่อตั้งค่าคุณสมบัติที่ตรวจสอบของช่องทำเครื่องหมายหรือปุ่มตัวเลือก หากคุณสมบัติ ng-checked ส่งคืนจริงช่องทำเครื่องหมายหรือปุ่มตัวเลือกจะถูกเลือก
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> </head> <อินพุต type = "ช่องทำเครื่องหมาย" ng-checked = "all"> volvo <br> <อินพุต type = "ช่องทำเครื่องหมาย" ng-checked = "all"> ford <br> <อินพุตประเภท = "ช่องทำเครื่องหมาย" ng-checked = "ทั้งหมด"> ทั้งหมด " รถยนต์. </h3> </body> </html>
3. ใช้แอนิเมชั่น CSS
เราสามารถใช้ การเปลี่ยนแปลง CSS หรือแอนิเมชัน CSS เพื่อสร้างองค์ประกอบ HTML ที่เคลื่อนไหวได้
(1) การเปลี่ยนแปลง CSS
การเปลี่ยนแปลง CSS ช่วยให้เราสามารถปรับเปลี่ยนค่าแอตทริบิวต์ CSS ได้อย่างราบรื่นไปอีก: เมื่อระดับ .ng-hide ถูกตั้งค่าบนองค์ประกอบ DIV การเปลี่ยนแปลงจะใช้เวลา 0.5 วินาทีและความสูงเปลี่ยนจาก 100px เป็น 0
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "JS/Angular-animate.min.js"> </ พื้นหลังสี: LightBlue; ความสูง: 100px;}. ng-hide {ความสูง: 0;} </style> </head> <body ng-app = "myapp"> <h1> ซ่อน div: <อินพุตประเภท = "ช่องทำเครื่องหมาย" ng-model = "mycheck"> </h1> <div ng-hide = "mycheck" ['nganimate']); </script> </body> </html>(2) แอนิเมชั่น CSS
แอนิเมชัน CSS ช่วยให้คุณสามารถปรับเปลี่ยนค่าแอตทริบิวต์ CSS ได้อย่างราบรื่น: เมื่อคลาส .ng-hide ถูกตั้งค่าบนองค์ประกอบ DIV ภาพเคลื่อนไหว myChange จะถูกดำเนินการและจะเปลี่ยนความสูงอย่างราบรื่นจาก 100px เป็น 0
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "js/animate.min.js" } ถึง {ความสูง: 10; }} div {ความสูง: 100px; พื้นหลังสี: lightblue;} div.ng-hide {แอนิเมชั่น: 10s mychange;} </style> </head> <body ng-app = "nganimate"> ซ่อน div: <อินพุต type = "ช่องทำเครื่องหมาย" ng-model = "mycheck"> <div ng-hide = "mycheck"สรุป
ข้างต้นเป็นเรื่องเกี่ยวกับแอนิเมชั่น AngularJS บทความนี้สรุปรายละเอียดและแสดงรหัสตัวอย่าง ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคนที่เรียนรู้ AngularJs