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.

I'm not sure that the newer versions of $animate will play nice with animate.css since they add/remove multiple classes during the transition... if animate.css is a requirement you might be better off with ng-class and handling figuring out which class should be applied based on a boolean that way http://plnkr.co/edit/LN8wunbuPrKcuEV1ouMQ?p=preview — shaunhusain, Jun 24 '14 at 03:49
no animate.css is not a requirement. I was just trying to figure out how they both play together. Thanks for your response and the solution you provided. — Miguel-.o, Jun 24 '14 at 12:10
np I tried quite a few things regarding ng-class too but unfortunately couldn't get it working... would be nice to see a solution to working with animate.css, not sure why a simple ng-class using the showme property was adding/removing the classes with fadeIn and fadeOut specified as animations and using the animated class... unfortunately no real experience with animate.css so hard for me to tell what's wrong.. here's that though: http://plnkr.co/edit/Ey20sPZLqOCmfdFcBai7?p=preview — shaunhusain, Jun 24 '14 at 18:05

score 10 · Accepted Answer · answered Oct 10 '14 at 15:20

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.

score 1 · Answer 2 · answered Jun 24 '14 at 18:09

1

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

answered Jun 24 '14 at 18:09

shaunhusain

19,630
4
38
51

Thanks. I don't understand why ng-show and ng-hide would not work with animation.css. Thanks for the help. – Miguel-.o Jun 25 '14 at 12:26

Animate.css and Angularjs ng-hide

2 Answers2