Angular $ Animate Missverständnis

Ich habe etwas fehlt in AngularJS $ animate. Ich habe keine Ahnung, ob mein Fehler trivial oder ein massives Missverständnis ist. Ich habe versucht, dies auf das Minimum Beispiel zu reduzieren, aber es ist immer noch ein bisschen groß. Zumindest jedoch sollte es aus der Box laufen ...

<!doctype html> 
 
<html data-ng-app="MyModule"> 
 

 
<head> 
 
    <style type="text/css"> 
 
    .msg.ng-leave { 
 
     transition: all 1s; 
 
     opacity: 1; 
 
    } 
 
    
 
    .msg.ng-leave.ng-leave-active { 
 
     opacity: 0; 
 
    } 
 
    
 
    .fade.ng-enter { 
 
     transition: opacity 1s; 
 
     opacity: 0; 
 
    } 
 
    
 
    .fade.ng-enter.ng-enter-active { 
 
     opacity: 1; 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body data-ng-controller="MyController"> 
 
    <div class="navpanel"> 
 
    <p class="msg"><strong>This is a message, make it go away</strong></p> 
 
    <h3>Menu</h3> 
 
    <ul id="menulist"> 
 
     <li>Do This</li> 
 
     <li>Do That</li> 
 
    </ul> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script> 
 
    angular.module('MyModule', ['ngAnimate']) 
 
     .controller('MyController', ['$scope', '$animate', function($scope, $animate) { 
 
     let npanel = angular.element(document.querySelector('.navpanel')); 
 
     let msg = angular.element(document.querySelector('.msg')); 
 
     let menulist = angular.element(document.getElementById('menulist')); 
 
     let counter = 0; 
 
     npanel.on('click', function() { 
 
      $animate.leave(msg); 
 

 
      let newpara = angular.element(document.createElement('p')); 
 
      newpara.html('new paragraph ' + (++counter)).addClass('fade'); 
 

 
      let children = npanel.children(); 
 
      $animate.enter(angular.element(newpara), npanel, menulist); 
 
     }); 
 
     }]); 
 
    </script> 
 
</body> 
 

 
</html>

Es soll die beiden wichtigsten Dinge auf Mausklick tun. Eins, sollte es die Nachricht entfernen, zwei, sollte es einen neuen Absatz einfügen. Es tut die zweite (mit $ animate.enter), aber die erste schlägt komplett fehl (mit $ animate.leave). $ animate.leave scheint, aus der Dokumentation heraus, durch irgendeine Animation laufen zu lassen, und dann das Element aus dem DOM zu entfernen, aber mein Code tut nichts davon. Das $ animate.enter hingegen kann keine Animationen ausführen, aber kann verwalten, um das neue Element einzufügen (was zu implizieren scheint, dass $ animate korrekt injiziert wurde).

Was fehlt mir?

TIA, Toby

Quelle

2016-06-15 Toby Eggitt

on ist ein jqLite/Methode jQuery und wird nicht auslösen AngularJS‘cycle verdauen. Das heißt, wenn Sie auf das Element klicken, das der angefügte Ereignis-Listener ausführt, werden die DOM-Operationen ausgeführt, aber da der Digest-Zyklus nicht startet, werden die Animations-Hooks von AngularJS nicht mit der Animation umgehen.

können Sie $apply verwenden:

$ apply() verwendet wird, um einen Ausdruck in Winkel von außerhalb die Winkel Rahmen auszuführen. (Zum Beispiel aus Browser-DOM-Ereignissen, setTimeout, XHR oder Bibliotheken von Drittanbietern). Da wir in das eckige Rahmenwerk aufrufen, müssen wir den richtigen Umfangslebenszyklus von Ausnahmebehandlung durchführen, Uhren ausführend.

. Zum Beispiel:

npanel.on('click', function() { 
    $scope.$apply(function() { 
    $animate.leave(msg); 

    let newpara = angular.element(document.createElement('p')); 
    newpara.html('new paragraph ' + (++counter)).addClass('fade'); 

    let children = npanel.children(); 
    $animate.enter(angular.element(newpara), npanel, menulist); 
    }); 
});

Quelle

2016-06-16 05:37:16 tasseKATT

Gach, natürlich :(Die Eingabe sofort fügt die Komponente, und dann beginnt trrying Winkelbezogene Dinge zu tun, so dass die Werke hinzufügen, und der Rest versagt Der Urlaub Im Gegensatz dazu, tut eckigen Kram (Animation) * zuerst *, und weil diese nie auslösen, daher wird es nie zum Abschluss der DOM remove-Operation, die zuletzt kommt. Ich steckte auf das Problem von "ist ngAnimate vorhanden" und das, weil Enter hat etwas gemacht, $ animate muss "an Ort und Stelle" sein. Ich habe jqLite bis zu diesem Punkt auch sehr wenig benutzt. Vielen Dank! –

Gern geschehen :) Ich weiß, dass es verwirrend werden kann, ich bin festgefahren t hier selbst in der Vergangenheit. – tasseKATT

Antwort

Verwandte Themen