Animation ausblenden bei ng-if = false

Question

Gibt es eine Möglichkeit, mit Fade-Out zu animieren, wenn ng-if="false" statt sofort das HTML-Element ausblenden?

Ich kann einblenden, wenn ng-if="true", aber nicht wenn ng-if="false". Wenn ng-if="true" ich verwende Animate.css Bibliothek mit Fade-in zu animieren.

Answer 1

sollten Sie ng-animate für diese. Es ist eine native Winkel Bibliothek, die Übergangsklassen und eine Verzögerung beim Entfernen von Elementen

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

Anstatt ein ng-if zu verwenden, um diese Funktionalität zu handhaben, könnten Sie das Javascript verwenden.

Also in Ihrer Controller-Funktion, wo Sie Ihre ng-if Boolean die fadeIn-Klasse direkt zum HTML-Element dort hinzufügen und wenn die Bedingung falsch wird, fügen Sie die FadeOut. Beispiel: $ ("div") .addClass ("fadeIn");

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