kątowa animacja

Question

Obecnie mam ten wiersz kodu bezpośrednio w kontrolerze ng-click

$(".message").show(300).delay(900).hide(300);

a jednocześnie działa absolutnie w porządku powiedziano mi, że muszę zrobić animacje NIGDY/jQuery/Manipulowanie DOM z poziomu kontrolera. Czy jest inny sposób na zrobienie tego, co nie wiąże się z niedorzecznością?

Answer 1

Napisz prosty dyrektywę, która ogląda swój atrybut:

app.directive('animateMe', function() { 
    return function(scope, element, attrs) { 
     scope.$watch(attrs.animateMe, function() { 
     element.show(300).delay(900).hide(300); 
     }) 
    } 
}) 

umieścić, że dyrektywę w sprawie elementu HTML, który chcesz animować. Mając ng-kliknięcie, przełączam właściwość model/zakres.

<a ng-click="animateToggle = !animateToggle">animate</a> 
<div animate-me="animateToggle">...</div> 

Więcej kodu, tak. Ale teraz masz coś do ponownego użycia (i nie potrzebujesz selektorów).

Fiddle

W skrzypcach, dodałem NG-hide do div tak, że nie pojawia się na początku.

---

Aktualizacja:
kątowa 1.1.4 ma teraz dyrektywę ngAnimate. Chociaż nie jest tak elastyczny, jak napisanie własnej dyrektywy animacji, poradzi sobie z wieloma scenariuszami. Dyrektywa ng-show (i ng-hide) obsługuje show i hideanimation methods.

Answer 2

Proponuję użyć nowej dyrektywy ngAnimate dostarczonej w rdzeniu AngularJS 1.1.4.

Czytaj więcej here