حركات AngularJS

بمساعدة CSS، يقدم AngularJS انتقالات تحرك.

ما هو التحرك؟

التحرك هو تغيير في عناصر HTML التي يوحي لك بوجود حركة.

مثال

اختر المربع المحدد لإخفاء DIV:

<body ng-app="ngAnimate">
إخفاء DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

جرب بنفسك

لا يجب أن تكون تطبيقك مليئًا بالتحركات، ولكن بعض التحركات يمكن أن تجعل تطبيقك أكثر فهمًا.

ماذا أحتاج؟

لجعل تطبيقك مستعدًا للتحرك، يجب أن تتضمن مكتبة AngularJS Animate:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

ثم، يجب عليك مراجعة النموذج في التطبيق. ngAnimate النموذج:

<body ng-app="ngAnimate">

أو، إذا كان لديك اسم للتطبيق، يرجى ngAnimate إضافة كإعداد للنموذج الخاص بالتطبيق:

مثال

<body ng-app="myApp">
<h1>إخفاء DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

جرب بنفسك

ما هو دور ngAnimate؟

ngAnimate النموذج يضيف ويحذف الصفات.

ngAnimate النموذج لا يجعل عناصر HTML متحركة، ولكن عند ngAnimate لقد لاحظت بعض الأحداث (مثل إخفاء أو عرض عنصر HTML) فإن العنصر يحصل على بعض الصفات المسبقة التحضير، ويتم استخدام هذه الصفات لصنع الرسوم المتحركة.

تعليمات إضافة أو حذف الصفات في AngularJS تشمل:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show و ng-hide تعليمات إضافة أو حذف ng-hide قيم الصفات.

تضيف التعليمات الأخرى هذه القيم عند الدخول إلى DOM، ng-enter قيم الصفات، ويتم إضافتها عند إزالتها من DOM، ng-leave الصفات.

عندما يغير العنصر HTML موقعه،ng-repeat تعليمات إضافة ng-move قيم الصفات.

إضافة إلى ذلك، خلال عملية الرسوم المتحركة، سيكون عنصر HTML يمتلك مجموعة من القيم، ويتم حذف هذه القيم بعد اكتمال الرسوم المتحركة. على سبيل المثال:ng-hide تعليمات إضافة هذه القيم إلى الصفات:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(إذا كنت ترغب في إخفاء العنصر)
  • ng-hide-remove(إذا كنت ترغب في عرض العنصر)
  • ng-hide-add-active(إذا كنت ترغب في إخفاء العنصر)
  • ng-hide-remove-active(إذا كنت ترغب في عرض العنصر)

استخدام CSS للتحكم في الرسوم المتحركة

يمكننا استخدام تغيرات CSS أو رسوم CSS المتحركة لإضافة تأثيرات الرسوم المتحركة إلى عناصر HTML. سأريك كلتا الطريقتين في هذا الدرس.

للتعرف على معلومات أكثر حول CSS الرسوم المتحركة، يرجى دراسة دروسنا حول تغيرات CSS ورسوم CSS المتحركة.

تغيرات CSS

تسمح التغيرات CSS للتحول من قيمة إلى أخرى من خصائص CSS بشكل سلس خلال فترة معينة:

مثال

عندما يتحصل عنصر DIV .ng-hide عندما يكون الوقت، سيستمر التحول 0.5 ثانية، وارتفاع سيكون من 100px إلى 0:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

جرب بنفسك

حركات CSS

تسمح الحركات في CSS بتحويل قيمة الخاصية CSS بشكل سلس خلال فترة معينة:

مثال

عندما يتحصل عنصر DIV .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

جرب بنفسك