How to fade out element using ng-hide with AngularJS?

javascript angularjs css-animations ng-hide
RichC picture RichC · Mar 21, 2017 · Viewed 7.5k times · Source

I can currently show/hide an element according to a boolean condition in my controller. How can I fade the element out if the condition is true instead of just instantly hiding it? 

<div id='conversion-image' ng-hide="pages.length > 0">
    generating pages...
    <br />
    <img src='Images/ajax-loader-blue.gif' />
</div>

I also already have the ngAnimate dependancy included as well.

var app = angular.module("app", ["ngAnimate"]);

Answer

Mistalis picture Mistalis · Mar 21, 2017

You can do it with CSS and ng-animate as the following:

.fade-out.ng-hide {
  opacity: 0;
}

.fade-out.ng-hide-add, .fade-out.ng-hide-remove {
  transition: all linear 0.5s;
}

.check-element {
  border: 1px solid black;
  opacity: 1;
  padding: 10px;
}
<head>
  <meta charset="UTF-8">
  <link href="animations.css" rel="stylesheet" type="text/css">
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="//code.angularjs.org/snapshot/angular-animate.js"></script>      
</head>

<body ng-app="ngAnimate">
  Hide: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br />
  <div class="check-element fade-out" ng-hide="checked">
    I fade out when your checkbox is checked.
  </div>
</body>

Angular ng-hide docs

Related questions

"Thinking in AngularJS" if I have a jQuery background?

Suppose I'm familiar with developing client-side applications in jQuery, but now I'd like to start using AngularJS. Can you describe the paradigm shift that is necessary? Here are a few questions that might help you frame an answer: How do …

Read More
AngularJS passing data to $http.get request

I have a function which does a http POST request. The code is specified below. This works fine. $http({ url: user.update_path, method: "POST", data: {user_id: user.id, draft: true} }); I have another function for http GET and …

Read More
Insert HTML into view from AngularJS controller

Is it possible to create an HTML fragment in an AngularJS controller and have this HTML shown in the view? This comes from a requirement to turn an inconsistent JSON blob into a nested list of id: value pairs. Therefore …

Read More