אחת הטעויות הנפוצות בכתיבת directive היא לא להשתמש ב-$animate. אתם שואלים למה להשתמש בזה עם אתם לא חושבים על אנימציה? התשובה ש-$animate כל מה שהוא עושה זה:
1. Enter – להוסיף איבר ל-DOM
2. Leave – להוריד איבר מ-DOM
3. Move – להזיז איבר קיים ב-DOM למקום אחר, כלומר שיהיה לו אבא אחר.
4. addClass ו- removeClass השם אומר הכל.
במילים פשוטות $animate מוגדר בקובץ angular.js ושם הוא רק עושה את הפעולות 1-4. כאשר מוסיפים את הקובץ angular-animate.js ומגדירים תלות במודול ngAnimate, המודול ngAnimate מבצע Decorator על $animate ומגדיר מחדש את הפעולות 1-4.
לדוגמא פעולת enter איך שהיא מוגדרת בקובץ angular.js:
function enter (element, parent, after, done) {
if (after) {
after.after(element);
} else {
if (!parent || !parent[0]) {
parent = after.parent();
}
parent.append(element);
}
async(done);
}
מה שאנחנו רואים בקוד שמתודה enter עושה פעולה פשוטה של jQuery ( append() או after() תלוי בארגומנטים ) ולכן שאתם כותבים directive ואתם במתודה של ה-linkמבצעים את הפעולות האלו על element עדיף שתשתמשו $animate כך אם תרצו בעתיד תכלו לקבל תמיכה באנימציה. ( ממליץ בחום להסתכל בקוד של אנגולר על כל המתודות, leave, move, addClass ו- removeClass.
עכשיו נראה את ההגדרה החדשה של enter, כאשר מוסיפים את ngAnimate:
$provide.decorator('$animate', function ($delegate,
$injector, $sniffer, $rootElement, $timeout, $rootScope, $document) {
//…
return {
enter: function (element, parent, after, doneCB) {
this.enabled(false, element);
$delegate.enter(element, parent, after);
$rootScope.$$postDigest(function () {
performAnimation('enter', 'ng-enter', element, parent, after, noop, doneCB);
});
}
// …
};
});
הסברים:
1. ngAnimate מבצע Decorator על השרות $animate ולכן ה-directives שלכם עכשיו מקבלים את $animate החדש. הסברים נוספים על Decorator אתם יכולים למצוא בפוסט הקודם שלי .
2. delegate.enter(element, parent, after) מפעיל את $animate המקורי.
3. המתודה performAnimation היא למעשה עושה את האנימציה. הסברים איך המתודה מבצעת את האנימציה בפוסט אחר.
סיכום:
עדיף להשתמש ב-$animate בפונקצית ה-link בכל מקום שאפשר במקום לעשות ישירות פעולות על ה-DOM כי כך אנחנו נקבל תמיכה באנימציה אם נרצה והדבר לא פוגע בביצועים.
תגובה אחת ל-“AngularJS $animate in Directive”