Animate.css i Angularjs ng-hide

Question

Uczę się i eksperymentuję z Angularjs i animate.css. Próbuję dodać animacje, gdy ng-show jest prawdziwe lub fałszywe. Pokazywanie i ukrywanie utworów, ale nie animacje. Mam nadzieję, że ktoś tutaj może mi pokazać, co robię źle.

Oto plunk.

dzięki za pomoc.

Answer 1

Oto nieco zmodyfikowana wersja twojego kodu, razem z ng-show i animate.css.

HTML

<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> 

JavaScript

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

CSS

.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/

Zwróć uwagę na opcje po lewej stronie (body tag, zasoby zewnętrzne), które należy ustawić, aby uzyskać kątowy przebieg i działanie w jsfiddle.

Answer 2

Znaleziono rozwiązanie, które wydaje się działać z ngAnimate i animate.css, a ja zaktualizowałem wersję do wersji 1.2.17 i wydaje się, że nadal działa przy użyciu tej metody ... nie wiem, dlaczego nie mogłem odtworzyć w plunkr: http://jsbin.com/usaruce/2677/edit?html,css,js,output