Animate.css and Angularjs ng-hide

Question

I am learning and experimenting with Angularjs and animate.css. I am trying to add animations when the ng-show is true or false. The showing and hiding works but not the animations. Hope someone here can show me what I am doing wrong.

Here is the plunk.

thanks for the help.

Answer 1

Here's a slightly modified version of your code with ng-show and animate.css working together.

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/

Note the options on the left (body tag, external resources) that have to be set to get angular up and running on jsfiddle.

Answer 2

Found a solution that seems to work with ngAnimate and animate.css and I upgraded the version to 1.2.17 and it seems to still work using this method... not sure why I couldn't reproduce in a plunkr: http://jsbin.com/usaruce/2677/edit?html,css,js,output