angular ngShow with animate.css

Question

I want to animate the showing and hiding of an element using animate.css and angular.

I have read this SO question and the angular documentation for ngShow and ngAnimate but still cannot get it to work.

I have tried the following setup on plunker, but it doesn't work.

app.js

var app = angular.module('plunker', ['ngAnimate']); app.controller('MainCtrl', function($scope) { $scope.show = true; });

index.html

<body ng-controller="MainCtrl"> <p>Show: {{show}}</p> <div class="show" ng-click="show = !show" ng-show="show === true">Show is true</div> <div class="hide" ng-click="show = !show" ng-show="show === false">Show is false</div> </body>

style.css

.show.ng-hide-add { animation: fadeOut 5s linear; }

When clicking on "show is true" (and therefor hiding it) I see it wait for 5 second before hiding, so there is something happening, but it doesn't fade out.

I can make it work if I add this to the css:

.show.ng-hide-add { opacity: 1.0; display: block !important; transition: opacity 1s; } .show.ng-hide-add-active { opacity: 0; }

However, I don't want to do it this way. I want to use animate.css's keyframes (I think that's the correct term, my css lingo isn't brilliant) such as fadeIn, fadeOut etc..

plunker to show what I am seeing.

What am I doing wrong? How can I use animate.css's keyframe animations with angular's ngAnimate?

fbid · Accepted Answer · 2016-04-21 10:56:19Z

You have to use .ng-hide class, as it's the class that is assigned once the condition in ng-show is false, or in ng-hide is true.

According to that you can edit your code like this:

.show.ng-hide, .hide.ng-hide{ opacity: 0; transition: all linear 0.5s; } .show, .hide{ transition: all linear 0.5s; opacity:1; }

<p>Show: {{show}}</p> <div class="show" ng-click="show = !show" ng-show="show">Show</div> <div class="hide" ng-click="show = !show" ng-hide="show">Hide</div>

-

EDIT:

In case you want to use the animate.css classes, for example .fadeIn and .fadeOut you have to assign the corresponding keyframes inside your css.

So you have to use the following CSS:

.show.ng-hide, .hide.ng-hide{ animation-name:fadeOut; animation-duration: .5s; } .show{ animation-name:fadeIn; animation-duration: .5s; }

IMPORTANT NOTE: In order to make it work correctly in the plunker I have not used the 3.2.0 version suggested by the plunker external library finder, but I manually linked the 3.5.1 version adding the following code in the html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" />

-

Working Plunker with full code

I am able to get it work if I add my own css transitions using the second piece of code I posted. However, I stated in my question that I wanted to use animate.css keyframe animations. fadeIn, zoomOut etc. I will edit my question to try make it a little less confusing. Sorry.
@MattLishman: see the edit in my answer and let me know if it works out for you. I updated the Plunker example too.
Ah! In your plunker you use a different version of animate.css than me. Using that same version (using plunkers library feature, which I didn't use for animate.css, for some reason...) my original code works. So you answered my question, but in a different way. Although your answer is still useful for others, if you want to add that to your answer I can accept it.
@MattLishman sure I'm adding it right now. I had the same problem with plunker library feature and end up copy and pasting the link from cdnjs.com

byteC0de · Accepted Answer · 2016-04-21 09:52:57Z

Change your code to this

<div ng-show="show"> <div class="show" ng-click="show = !show">Show</div> </div> <div ng-show="!show"> <div class="hide" ng-click="show = !show" >Hide</div> </div> .show.ng-hide{ opacity: 0; transition: all linear 0.5s; } .show{ transition: all linear 0.5s; opacity:1; }

Collectives™ on Stack Overflow

angular ngShow with animate.css

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related