एनीमेशन फीका जब ng-if = false

Question

क्या ng-if="false" तुरंत HTML तत्व को छिपाने के बजाय फीका आउट करने के लिए कोई तरीका है?

मैं ng-if="true" पर फीका-इन कर सकता हूं लेकिन ng-if="false" नहीं कर सकता। जब 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

इस कार्यक्षमता को संभालने के लिए एनजी-अगर का उपयोग करने के बजाय, आप जावास्क्रिप्ट का उपयोग कर सकते हैं।

तो आपके कंट्रोलर फ़ंक्शन में जहां आप अपना एनजी सेट कर रहे हैं- यदि बूलियन फीडइन क्लास को सीधे HTML तत्व में जोड़ता है और यदि स्थिति गलत हो जाती है तो fadeOut जोड़ें।

उदाहरण के लिए: $ ("div") .addClass ("fadeIn");

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