Animate.css and Angularjs ng-hide

Question

Angularjs와 animate.css를 배우고 실험하고 있습니다. ng-show가 true 또는 false 일 때 애니메이션을 추가하려고합니다. 표시 및 숨기기는 작동하지만 애니메이션은 작동하지 않습니다. 여기 누군가가 내가 잘못하고있는 것을 보여줄 수 있기를 바랍니다.

여기는 plunk입니다.

도움 주셔서 감사합니다.

Answer 1

다음은 ng-show와 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> 

자바 스크립트

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

왼쪽에있는 옵션 (body 태그, 외부 리소스)은 jsfiddle에서 각도를 표시하고 실행하도록 설정해야합니다.

Answer 2

ngAnimate 및 animate.css와 호환되는 솔루션을 찾았으며 버전을 1.2.17로 업그레이드했으며이 방법을 사용하여 작동하는 것으로 보입니다 ... plunkr에서 재현 할 수없는 이유는 확실하지 않습니다. http://jsbin.com/usaruce/2677/edit?html,css,js,output