I am having trouble animating the display and concealment of an element using both animate.css and angular.
Despite reading through this question on Stack Overflow and going over the angular documentation for ngShow and ngAnimate, I am still unable to achieve the desired result.
I attempted a setup on plunker, however, it did not work as expected.
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;
}
Upon clicking "Show is true" (to hide it), there is a delay of 5 seconds before hiding. While something is happening, it does not fade out as intended.
I managed to make it work by adding the following CSS:
.show.ng-hide-add {
opacity: 1.0;
display: block !important;
transition: opacity 1s;
}
.show.ng-hide-add-active {
opacity: 0;
}
However, I prefer not to use this approach. Instead, I want to utilize animate.css's keyframes like fadeIn, fadeOut, etc.
Here is the plunker link demonstrating the issue.
What am I missing? How can I incorporate animate.css's keyframe animations with angular's ngAnimate?