يوفر AngularJS التحولات المتحركة، مع مساعدة من CSS.
ما هو الرسوم المتحركة؟
للرسوم المتحركة هو عندما تحول عنصر HTML يتيح لك الوهم في الحركة.
مثال:
اضغط على مربع لإخفاء DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
انها محاولة لنفسك »  | لا ينبغي أن شغل التطبيقات مع الرسوم المتحركة، ولكن يمكن لبعض الرسوم المتحركة جعل التطبيق أسهل للفهم. |
|---|
ما الذي أحتاجه؟
لجعل التطبيقات الخاصة بك على استعداد لالمتحركة، يجب عليك تضمين المكتبة AngularJS تحريك:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
و ng-show و ng-hide توجيهات يضيف أو يزيل ng-hide قيمة الدرجة.
توجيهات أخرى يضيف ng-enter قيمة الدرجة عند دخولهم DOM، و ng-leave السمة عندما يتم إزالتها من DOM.
و ng-repeat يضيف أيضا التوجيه و ng-move قيمة الدرجة عندما يتغير عنصر HTML الموقف.
وبالإضافة إلى ذلك، خلال الرسوم المتحركة، وعنصر 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:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
انها محاولة لنفسك » CSS متحركة
CSS متحركة تسمح لك لتغيير قيم خصائص CSS بسلاسة، من قيمة واحدة إلى أخرى، خلال مدة معينة:
مثال:
عندما يحصل على عنصر DIV في .ng-hide الطبقة، و myChange سيتم تشغيل الرسوم المتحركة، والتي سوف تغير بسلاسة ارتفاع من 100px إلى 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
انها محاولة لنفسك »