مقدمة
يوفر 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 {transition: All 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 = ng-hide = "mycheck"> </viv> </body> </html> إذا كان تطبيقنا قد قام بتعيين اسم التطبيق ، فيمكننا إضافة ngAnimate مباشرة إلى النموذج:
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> div {transition: All 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> </hege> <body ng-app = "my my h3> hide div: ng-hide = "mycheck"> </viv> <script> var app = Angular.module ('myapp' ، ['nganimate']) ؛ </script> </body> </html>2. ماذا فعل naganimate؟
يمكن أن يضيف النموذج 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 </itlect> <script src = "js/Angular.min.js"> </script> <script src = "js/Angulative-animate.js"> </system خلفية اللون: LightBlue ؛ الحشو: 20 بكسل ؛ Font-Family: "Courier New" ؛}. Tomato {Background-Color: Coral ؛ الحشو: 40 بكسل ؛ font-family: verdana ؛} </style> </head> <body ng-app = ""> <span> حدد فئة: </span> <select ng-model = "home" IT! </h4> </viv> </body> </html>(2) تشبه NG-Class-en-class ، ولكنه يعمل فقط على خطوط زوجية ؛ يشبه NG-Class-ODD من فئة NG ، ولكنه يعمل فقط على خطوط فردية ؛ يشبه NG-Class-ODD من فئة NG ، ولكنه يعمل فقط على خطوط فردية ؛
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> AngularJS </title> <script src = "js/angular.min.js"> </script> <style> .stripedeven {color: White ؛ خلفية اللون: cyan ؛}. Stripedodd {color: White ؛ خلفية اللون: Yellowgreen ؛} </style> </head> <body ng-app = "myapp"> <table ng-controller = "myctrl"> <tr> <th> name </h> <th> country </th> </trick-class-class-class- <td> {{x.name}}} </td> <td> {{x.country}} </td> </tr> </table> <script> var app = angular.module ("myapp" ، []) ؛ Futterkiste "،" Country ":" Germany "} ، {" Name ":" Berglunds Snabbk "،" Country ":" Sweden "} ، {" name ":" Centro Comercial Moctezuma "،" Country ":" Mexico "، ]}) ؛ </script> </body> </html>(3) ng-if إذا كانت الحالة خاطئة ، فإزالة عناصر HTML
يتم استخدام توجيه ng-if لإزالة عناصر HTML عندما يكون التعبير خطأ. إذا كانت نتيجة تنفيذ العبارة IF صحيحة ، فسيتم إضافة العنصر الذي تمت إزالته وعرضه. يختلف توجيه ng-if عن ng-hide ، ng-hide عناصر ، بينما يقوم ng-if بإزالة العناصر من DOM.
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> AngularJS </itlem> <script src = "js/Angular.min.js"> </script> </hege> <body ng-app = "ng-init =" myvar = true "<h3> ng-model = "myvar"> </h3> <div ng-if = "myvar"> <h1> مرحبًا </h1> <p> مرحبًا بك في منزلي. </p> <hr> </pliv> <p> تتم إزالة عنصر DIV عند عدم تحديد خانة الاختيار. </p> <p> عند إعادة اختيار خانة الاختيار ، سيتم إعادة تشغيل عنصر DIV. </p> </body> </html>
(4) تحدد NG-SECED ما إذا كان قد تم تحديد العنصر
يتم استخدام التوجيه ng-checked لتعيين الخصائص التي تم فحصها من خانة الاختيار أو زر الراديو. إذا تم إرجاع الخاصية ng-checked ، فسيتم تحديد مربع الاختيار أو زر الراديو.
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> AngularJS </itlem> <script src = "js/Angular.min.js"> </script> </head> <body ng-app = "" الكل <br> <input type = "checkbox" ng-checked = "all"> volvo <br> <input type = "checkbox" ng-checked = "all" السيارات. </h3> </body> </html>
3. استخدم الرسوم المتحركة CSS
يمكننا استخدام CSS Transition أو CSS الرسوم المتحركة لجعل عناصر HTML تحريكًا.
(1) انتقال CSS
يتيح لنا انتقال CSS تعديل قيمة سمة CSS بسلاسة إلى أخرى: عندما يتم تعيين فئة .ng-hide على عنصر DIV ، يستغرق الانتقال 0.5 ثانية ويتغير الارتفاع من 100 بكسل إلى 0.
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> AngularJS </itlem> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animate.min. خلفية اللون: LightBlue ؛ الارتفاع: 100px ؛} ['nganimate']) ؛ </script> </body> </html>
(2) الرسوم المتحركة CSS
تتيح لك الرسوم المتحركة CSS تعديل قيم سمات CSS بسلاسة: عندما يتم تعيين فئة .ng-hide على عنصر DIV ، سيتم تنفيذ الرسوم المتحركة myChange ، وسوف يغير الارتفاع بسلاسة من 100 بكسل إلى 0.
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> AngularJS </itlem> <script src = "js/angular.min.js"> </script> <script src = "js/angular- animate.min 100px ؛ } إلى {الارتفاع: 10 ؛ }} div {height: 100px ؛ خلفية اللون: LightBlue ؛} div.ng-hide {الرسوم المتحركة: 10s mychange ؛} </style> </head> <body ng-app = "nganimate"لخص
ما سبق هو كل شيء عن AngularJS الرسوم المتحركة. تلخصها هذه المقالة بالتفصيل وتوفر رمز مثال. آمل أن يكون ذلك مفيدًا لكل من يتعلم بعض AngularJs.