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

Answer 1

Using the ngAnimate module, you can do this in pure CSS with the -transition-delay directive:

Plunker

HTML

  Click me: 
  

  
  

CSS

img {
  position: absolute;
}

.ng-hide-add-active {
  display: block!important;
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.ng-hide-remove-active {
  display: block!important;
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.ng-hide {
  opacity: 0;
}