Fadein e dissolvenza angolari - il modo standard senza CSS?

Question

Trovo estremamente difficile creare un'animazione angolare, confrontandola con jquery. Ci sono così tante versioni di animazione angolare fadein e fadeout che le ho trovate da blog/tutorial/etc, alcune di loro sono in versione più vecchia di angolare. Angular sembra essere molto incoerente quando ne esce una versione più recente per sostituire quelle vecchie. Non riesco a vedere nessun modo standard per farlo. Quindi non so da dove cominciare.

Solo per attenuare un modulo o un documento html quando si fa clic sul pulsante.

html,

<button ng-click="loadInclude" >Load Include Form</button> 
<div ng-include="'form.php'" ng-if="readyToLoadForm===true"></div> 

angolare,

var app = angular.module("myapp", ['ngAnimate']); 

    app.controller("FormController",function($scope) { 

      $scope.readyToLoadForm = false; 
      $scope.loadInclude = function(e) { 
       $scope.readyToLoadForm = true; 
      }; 
     } 
    ); 

tutte le idee?

Answer 1

è possibile utilizzare un ng-show o ng-hide in questo caso

<div ng-show="readyToLoadForm" class="animate-show animate-hide">TEST HERE</div> 

quando si utilizza angular-animate.js volontà angolare add e remove diverse classi a questa voce quando mostra e nascondere. sulla base di quelle classi possiamo impostare un'animazione css sull'elemento.

ecco un semplice plunker

---

per ng-include animazione

ng-leave.ng-leave-active.ng-enter-active classi aggiungere l'elemento. c'è una piccola descrizione delle classi aggiunte durante l'animazione. e che desc dista ngAnimate

ecco la ng-enter demo Plunker

---

ecco la reference per come le classi assegnate all'elemento quando gli elementi di animazione in angularjs