AngularJS الرسوم المتحركة
يوفر AngularJS تأثيرات الرسوم المتحركة التي يمكن استخدامها مع CSS.
يستخدم AngularJS الرسوم المتحركة لتقديم مكتبة min.min.js الزاوي.
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script>
تحتاج أيضًا إلى استخدام النموذج ngicimate في طلبك:
<body ng-app = "nganimate">
ما هي الرسوم المتحركة؟
الرسوم المتحركة هي تأثير تغيير ديناميكي تم إنشاؤه عن طريق تغيير عناصر HTML.
مثال
حدد خانة الاختيار لإخفاء Div:
<! 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 = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "nganimate"> <h1> إخفاء div: <input type = "ng-model =" mecheck 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 = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "myapp"> <h1> إخفاء div: <type type = ng-model = "mycheck" </h1> ng-hide = "mycheck"> </viv> <script> var app = Angular.module ('myapp' ، ['nganimate']) ؛ </script> </body> </html>تأثير الجري:
ماذا فعل naganimate؟
يمكن أن يضيف النموذج nganimate أو إزالة الفصل.
لا يمكن للنموذج nganimate تنشيط عناصر HTML ، ولكن Nigganimate سوف يراقب الأحداث ، على غرار إخفاء وعرض عناصر HTML. في حالة حدوث حدث ما ، سيستخدم Nganimate فئة محددة مسبقًا لتحريك عناصر HTML.
توجيه AngularJS لإضافة/إزالة الفئة:
NG-Show
نانوغرام
نانوغرام فئة
NG-View
NG-In-Teb
نانوغرام تكرار
نانوغرام
ng-switch
يتم استخدام توجيهات NG-Show و NG-Hide لإضافة أو إزالة قيمة فئة NG-Hide.
ستضيف التوجيهات الأخرى فئة NG-Enter عند إدخال DOM ، وإزالة DOM ستضيف خاصية NG-Leave.
عندما يتغير موضع عنصر HTML ، يمكن لتوجيه التكرار NG أيضًا إضافة فئة NG-Move.
بالإضافة إلى ذلك ، بعد اكتمال الرسوم المتحركة ، ستتم إزالة مجموعة فئة من عناصر HTML. على سبيل المثال: سيضيف توجيه NG-Hide الفئة التالية:
نانوغرام
NG-Hide-animate
NG-Hide-Add (إذا كان العنصر سيتم إخفاءه)
ng-hide-remove (إذا كان سيتم عرض العنصر)
Ng-Hide-Add-Adive (إذا كان العنصر سيتم إخفاءه)
Ng-Hide-Remove-Active (إذا كان سيتم عرض العنصر)
باستخدام الرسوم المتحركة CSS
يمكننا استخدام CSS Transition أو CSS الرسوم المتحركة لجعل عناصر HTML تحريكًا. يمكنك الرجوع إلى برنامج CSS Transition Tutorial و CSS التعليمي للرسوم المتحركة.
انتقال CSS
يتيح لنا انتقال CSS تعديل قيمة سمة CSS بسلاسة إلى أخرى:
مثال
عندما يكون لعنصر DIV مجموعة فئة .ng-hide ، يستغرق الانتقال 0.5 ثانية ، ويتغير الارتفاع من 100 بكسل إلى 0:
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> div {transition: All Linear 0.5s ؛ خلفية اللون: LightBlue ؛ الارتفاع: 100px ؛} src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "myapp"> <h1> إخفاء div: <type type = ng-model = "mycheck" </h1> ng-hide = "mycheck"> </viv> <script> var app = Angular.module ('myapp' ، ['nganimate']) ؛ </script> </body> </html>الرسوم المتحركة CSS
تتيح لك الرسوم المتحركة CSS تعديل قيم خاصية CSS بسلاسة:
مثال
عندما يتم تعيين فئة .ng-hide على عنصر div ، سيتم تنفيذ الرسوم المتحركة myChange ، والتي ستغير الارتفاع بسلاسة من 100 بكسل إلى 0:
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> keyframes myChange {from {height: 100px ؛ } إلى {الارتفاع: 0 ؛ }} div {height: 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> <body ng-app = "nganimate" ng-hide = "mycheck"> </viv> </body> </html>ما سبق هو مجموعة من المعلومات حول الرسوم المتحركة AngularJS. يرجى الرجوع إليها إذا كنت في حاجة إليها.