angular ngShow with animate.css


Tags: javascript,css,angularjs,animation,animate.css

Problem :

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?



Solution :

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


    CSS Howto..

    How to get a CSS selector using Selenium WebDriver?

    How to load css and js

    How to use a variable for image paths with less mixins

    How to negate conjunction of two attributes in CSS selector

    How do I center a div along the y axis?

    How to add a tooltip for just the background image of an input field with HTML and CSS

    How to Make Tabs In CSS?

    How can I have an image float next to a centered div?

    How to create slanted tabs with a border in CSS? [duplicate]

    How to use a Drive hosted css to customize the receiver?

    How to set two floated divs to be the 100% height of the page

    How to vertically align inline-block elements with height set and test with browser tools

    How to make the slider move right and left alternatively

    How to get hovering shadow under a letter with CSS-only?

    CSS How to make div 100% despite 80% div

    How to make a hidden border side inherit border properties in CSS

    How to use css value for javascript in IF-THEN construction? [closed]

    How to use CSS function instead of LESS function?

    How to vertically align items in horizontally ul list with images?

    How to create the + button with CSS?

    How can I get the first and last name labels to align under the corresponding input forms?

    How to make outer columns same height with nested bootstrap grids

    CSS accordion menu - How to expand and hyperlink

    With twitter bootstrap, how can I make it so that there's no word wrap in tables without breaking columns?

    How can I do this: text inside rectangle using HTML/CSS?

    how to add two widths to one class in css

    How to make a progress bar like this in CSS

    how to prevent child element from widening parent element's width in css

    how to make NGINX serve static content like .js, .css, .html?

    How to make a File Sharing website [closed]