Animate.css और Angularjs ng-hide

Question

मैं Angularjs और animate.css के साथ सीख रहा हूं और प्रयोग कर रहा हूं। मैं एनजी-शो सच या गलत होने पर एनिमेशन जोड़ने की कोशिश कर रहा हूं। दिखा रहा है और छुपा काम करता है लेकिन एनिमेशन नहीं। उम्मीद है कि यहां कोई मुझे दिखा सकता है कि मैं क्या गलत कर रहा हूं।

यहां plunk है।

सहायता के लिए धन्यवाद।

Answer 1

यहां एनजी-शो और animate.css के साथ काम करने के साथ आपके कोड का थोड़ा संशोधित संस्करण है।

एचटीएमएल

<div ng-controller="controller"> 
    <button ng-click="showme = !showme">Show or Hide</button> 
    <div ng-show="showme" class="boxme"> 
    <h2>Box to Show and Hide</h2> 
    <p>Show and hide this box using animate.css the angularway!</p> 
    </div> 
</div> 

जावास्क्रिप्ट

(function() { 
    var app = angular.module("theapp", ['ngAnimate']); 
    var controller = function($scope){ 
     $scope.showme = false; 
    }; 
    app.controller("controller", controller); 
}()); 

सीएसएस

.boxme.ng-hide-add { 
    -webkit-animation: fadeOutLeftBig 0.4s; 
    display: block!important; 
} 
.boxme.ng-hide-remove { 
    -webkit-animation: fadeInLeftBig 0.4s; 
} 

http://jsfiddle.net/h58wsxcw/

बाएं (बॉडी टैग, बाहरी संसाधन) पर विकल्पों को नोट करें जिन्हें कोणीय होने और jsfiddle पर चलने के लिए सेट किया जाना है।

Answer 2

एक समाधान मिला जो ngAnimate और animate.css के साथ काम करता प्रतीत होता है और मैंने संस्करण को 1.2.17 में अपग्रेड किया और ऐसा लगता है कि यह अभी भी इस विधि का उपयोग कर काम करता है ... सुनिश्चित नहीं है कि मैं एक प्लंकर में पुन: उत्पन्न क्यों नहीं कर सकता: http://jsbin.com/usaruce/2677/edit?html,css,js,output