ng-if = falseのときにアニメーションをフェードアウト

Question

ng-if="false"が即座にHTML要素を非表示にする代わりにフェードアウトする方法はありますか？

ng-if="true"の場合はフェードインできますが、ng-if="false"の場合はできません。 When ng-if="true"私はAnimate.cssライブラリを使用してフェードインでアニメートしています。

Answer 1

あなたはこのためng-animateを使用する必要があります。これは、遷移クラス、代わりに要素

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

この機能を処理するためにng-ifを使用する代わりに、javascriptを使用できます。

ng-ifブール値を設定しているController関数では、fadeInクラスをhtml要素に直接追加し、条件がfalseになるとfadeOutを追加します。

例： $（ "div"）.addClass（ "fadeIn"）;

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