Matt Lishman
Matt Lishman

Reputation: 1817

angular ngShow with animate.css

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?

Upvotes: 3

Views: 2965

Answers (2)

fbid
fbid

Reputation: 1570

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

Upvotes: 3

byteC0de
byteC0de

Reputation: 5273

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;
}

Upvotes: 1

Related Questions