angularjs chained fade-in / fade-out transition

Question

I have looked at the official show/hide transition example at the bottom of this page... http://docs.angularjs.org/api/ng.directive:ngShow

I have tried to modify it to get a seemless fade transition (transition: opacity 0.5s ease-in-out) from one div to the other, where both divs occupy the exact same position on the page, so that one div completely fades out before the other div begins to fade in.

In jquery, it would be as simple as:

$("#divA").fadeOut(function() { $("divB").fadeIn(); });

Does anyone have any advice on the best way to achieve this with angular, with respect to the linked example, which uses a single model "checked" to trigger the transition?

Answer 1

I used the example in ngShow to make the following jsfiddle based on angular1.2.0-rc.3.

The html code:

<div ng-app="App">
  Click me: <input type="checkbox" ng-model="checked"><br/>
     <div class="check-element animate-show" ng-show="checked">
      <span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
    </div>
    <div class="check-element animate-show" ng-hide="checked">
      <span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
    </div>
</div>

The CSS styles

.animate-show.ng-hide-add, 
.animate-show.ng-hide-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove {
  line-height:0;
  opacity:0;
  padding:0 10px;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.check-element {
  padding:10px;
  border:1px solid black;
  background:white;
}

And finally the JavaScript code, don't forget to include the libraries angular.js and angular-animate.js

angular.module('App', ['ngAnimate']);

I hope it helps you ;)