Sto imparando e sperimentando Angularjs e animate.css. Sto cercando di aggiungere animazioni quando il ng-show è vero o falso. La rappresentazione e il nascondimento funzionano ma non le animazioni. Spero che qualcuno qui possa mostrarmi cosa sto sbagliando.Animate.css e Angularjs ng-hide
Questo è il plunk.
grazie per l'aiuto.
Ecco una versione leggermente modificata del codice con ng-show e animate.css che lavorano insieme.
HTML
<div ng-controller="controller">
<button ng-click="showme = !showme">Show or Hide</button>
<div ng-show="showme" class="boxme">
<h2>Box to Show and Hide</h2>
<p>Show and hide this box using animate.css the angularway!</p>
</div>
</div>
JavaScript
(function() {
var app = angular.module("theapp", ['ngAnimate']);
var controller = function($scope){
$scope.showme = false;
};
app.controller("controller", controller);
}());
CSS
.boxme.ng-hide-add {
-webkit-animation: fadeOutLeftBig 0.4s;
display: block!important;
}
.boxme.ng-hide-remove {
-webkit-animation: fadeInLeftBig 0.4s;
}
Nota le opzioni a sinistra (tag del corpo, risorse esterne) che devono essere impostate per diventare angolari e in esecuzione su jsfiddle.
Trovato una soluzione che sembra funzionare con ngAnimate e animate.css e ho aggiornato la versione alla versione 1.2.17 e sembra funzionare ancora utilizzando questo metodo ... non sono sicuro del motivo per cui non riesco a riprodurre in un plunkr: http://jsbin.com/usaruce/2677/edit?html,css,js,output
Grazie. Non capisco perché ng-show e ng-hide non funzionino con animation.css. Grazie per l'aiuto. –
Non sono sicuro che le nuove versioni di $ animate giocheranno bene con animate.css poiché aggiungono/rimuovono più classi durante la transizione ... se animate.css è un requisito potreste stare meglio con ng- classe e gestione per capire quale classe deve essere applicata in base a un booleano in questo modo http://plnkr.co/edit/LN8wunbuPrKcuEV1ouMQ?p=preview – shaunhusain
no animate.css non è un requisito. Stavo solo cercando di capire come giocano entrambi insieme. Grazie per la risposta e la soluzione che hai fornito. –
np Ho provato parecchie cose riguardo alla ng-class, ma sfortunatamente non ho potuto farlo funzionare ... sarebbe bello vedere una soluzione per lavorare con animate.css, non sono sicuro del perché una semplice classe-ng usa la proprietà showme stava aggiungendo/rimuovendo le classi con fadeIn e fadeOut specificate come animazioni e usando la classe animata ... sfortunatamente nessuna esperienza reale con animate.css è così difficile per me da dire cosa c'è che non va .. ecco però: http://plnkr.co/edit/Ey20sPZLqOCmfdFcBai7? p = anteprima – shaunhusain