Animate.css and Angularjs ng-hide -

Animate.css and Angularjs ng-hide -

i learning , experimenting angularjs , animate.css. trying add together animations when ng-show true or false. showing , hiding works not animations. hope here can show me doing wrong.

here plunk.

thanks help.

here's modified version of code ng-show , 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 show , hide</h2> <p>show , hide box using animate.css 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 options on left (body tag, external resources) have set angular , running on jsfiddle.

angularjs ng-animate ng-show animate.css ng-hide