AngularJS الرسوم المتحركة
يوفر AngularJS الرسوم المتحركة، يمكنك استخدام مع CSS.
AngularJS الرسوم المتحركة تحتاج إلى إدخال مكتبة الزاوي-animate.min.js.
<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
وينبغي أن تستخدم في ngAnimate تطبيق نموذج:
<body ng-app="ngAnimate">
ما هي الرسوم المتحركة؟
الرسوم المتحركة الآثار الدينامية عن طريق تغيير عنصر HTML المنتجة.
أمثلة
حدد خانة الاختيار لإخفاء DIV:
إخفاء DIV: <إدخال نوع = "مربع " نانوغرام طراز = "myCheck">
<div نانوغرام إخفاء = "myCheck "> </ div>
</ الجسم>
محاولة »
 | تطبيقات الرسوم المتحركة ليس كثيرا، ولكن الاستخدام الملائم للرسوم المتحركة يمكن أن تزيد من ثراء الصفحة، أو يمكنك السماح للمستخدمين فهم أكثر سهولة. |
|---|
لو طبقنا تم تعيين اسم التطبيق يصل، يمكنك وضع أضاف ngAnimate مباشرة في النموذج:
أمثلة
<H1> إخفاء DIV: <إدخال نوع = "مربع " نانوغرام طراز = "myCheck"> </ H1>
<div نانوغرام إخفاء = "myCheck "> </ div>
<script>
محاولة »
ngAnimate عمله؟
ngAnimate نموذج يمكن إضافة أو إزالة الطبقة.
ngAnimate النموذج لا تجعل عناصر الأرواح HTML، ولكن سوف 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 تغيرت إلى آخر:
أمثلة
في مجموعات عنصر DIV .ng-hide الطبقة، والانتقال يأخذ 0.5 ثانية، وارتفاع من 100px إلى 0:
شعبة {
الانتقال: كل خطية 0.5S.
لون الخلفية: lightblue.
الطول: 100px؛
}
.ng إخفاء {
الطول: 0؛
}
</ النمط>
محاولة »
CSS الرسوم المتحركة
CSS الرسوم المتحركة يسمح لك لضمان سلاسة تعديل قيمة العقارات CSS:
أمثلة
في العنصر DIV يحدد .ng-hide متفرغا الطبقة، myChange يتم تنفيذ الرسوم المتحركة، وسوف يكون ارتفاع السلس من 100px إلى 0:
keyframes myChange {
من {
الطول: 100px؛
} إلى {
الطول: 0؛
}
}
شعبة {
الطول: 100px؛
لون الخلفية: lightblue.
}
div.ng إخفاء {
الرسوم المتحركة: 0.5S myChange.
}
</ النمط>
محاولة »