AngularJS الرسوم المتحركة
يوفر AngularJS انتقالات متحركة بمساعدة CSS.
ما هي الرسوم المتحركة؟
الرسوم المتحركة هي عندما يمنحك تحويل عنصر HTML وهمًا بالحركة.
مثال:
حدد خانة الاختيار لإخفاء DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
لا ينبغي أن تمتلئ التطبيقات بالرسوم المتحركة ، ولكن بعض الرسوم المتحركة يمكن أن تجعل التطبيق أسهل في الفهم.
ماذا احتاج؟
لجعل تطبيقاتك جاهزة للرسوم المتحركة ، يجب عليك تضمين مكتبة AngularJS Animate:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
ثم يجب عليك الرجوع إلى ngAnimateالوحدة في التطبيق الخاص بك:
<body ng-app="ngAnimate">
أو إذا كان للتطبيق الخاص بك اسمًا ، فقم بإضافته ngAnimateكاعتماد في الوحدة النمطية للتطبيق الخاص بك:
مثال
<body ng-app="myApp">
<h1>Hide the 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-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
تضيف التوجيهات ng-showو ng-hideأو تزيل ng-hideقيمة فئة.
تضيف التعليمات الأخرى ng-enterقيمة فئة عند دخولها إلى DOM ، وسمة ng-leaveعند إزالتها من DOM.
يضيف التوجيه ng-repeatأيضًا ng-moveقيمة فئة عندما يغير عنصر HTML موضعه.
بالإضافة إلى ذلك ، أثناء الرسم المتحرك ، سيكون لعنصر HTML مجموعة من قيم الفئة ، والتي ستتم إزالتها عند انتهاء الرسم المتحرك. مثال:
ng-hideسيضيف التوجيه قيم الفئة هذه:
ng-animateng-hide-animateng-hide-add(إذا كان العنصر سيكون مخفيًا)ng-hide-remove(إذا كان العنصر سيظهر)ng-hide-add-active(إذا كان العنصر سيكون مخفيًا)ng-hide-remove-active(إذا كان العنصر سيظهر)
الرسوم المتحركة باستخدام CSS
يمكننا استخدام انتقالات CSS أو رسوم CSS المتحركة لتحريك عناصر HTML. سيُظهر لك هذا البرنامج التعليمي كليهما.
لمعرفة المزيد حول CSS Animation ، قم بدراسة CSS Transition Tutorial و CSS Animation Tutorial .
انتقالات CSS
تسمح لك انتقالات CSS بتغيير قيم خصائص CSS بسلاسة ، من قيمة إلى أخرى ، خلال مدة معينة:
مثال:
عندما يحصل عنصر DIV على .ng-hideالفئة ، سيستغرق الانتقال 0.5 ثانية ، وسيتغير الارتفاع بسلاسة من 100 بكسل إلى 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
الرسوم المتحركة CSS
تتيح لك CSS Animations تغيير قيم خصائص CSS بسلاسة ، من قيمة إلى أخرى ، خلال مدة معينة:
مثال:
عندما يحصل عنصر DIV على .ng-hideالفصل ، myChange
سيتم تشغيل الرسوم المتحركة ، والتي ستغير الارتفاع بسلاسة من 100 بكسل إلى 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>