Fade out animation when ng-if = false

Question

C'è un modo per animare con fade out quando ng-if="false" invece di nascondere immediatamente l'elemento HTML?

È possibile effettuare la dissolvenza in apertura quando ng-if="true" ma non è possibile quando ng-if="false". Quando ng-if="true" sto usando la libreria Animate.css per animare con la dissolvenza in apertura.

Answer 1

Si dovrebbe usare ng-animate per questo. Si tratta di una libreria nativa angolare che aggiunge classi di transizione e un ritardo sulla rimozione di elementi

angular.module('app', ['ngAnimate']). 
 
controller('ctrl', function(){});

.fade-element-in.ng-enter { 
 
    transition: 0.8s linear all; 
 
    opacity: 0; 
 
} 
 

 
.fade-element-in-init .fade-element-in.ng-enter { 
 
    opacity: 1; 
 
} 
 

 
.fade-element-in.ng-enter.ng-enter-active { 
 
    opacity: 1; 
 
} 
 

 
.fade-element-in.ng-leave { 
 
    transition: 0.3s linear all; 
 
    opacity: 1; 
 
} 
 
.fade-element-in.ng-leave.ng-leave-active { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <a href="" ng-click="showMe = !showMe">Click me</a> 
 
    <div class="fade-element-in" ng-if="showMe"> 
 
    SomeContent 
 
    </div> 
 
    <div class="fade-element-in" ng-if="!showMe"> 
 
    SomeOtherContent 
 
    </div> 
 
</div>

Answer 2

Invece di utilizzare un ng-se per gestire questa funzionalità, è possibile utilizzare il javascript.

Quindi nella funzione Controller in cui si imposta ng-if Boolean si aggiunge la classe fadeIn direttamente all'elemento html e se la condizione diventa falsa aggiungere fadeOut.

Ad esempio: $ ("div") .addClass ("fadeIn");

https://api.jquery.com/addclass/