0

I use ng-animate and ng-view for sexy show/hide content. It's work but I try to show second content after first content was already hidden, and i can't understand how do this. I'll be glad to get help. My html:

<div ui-view='' ng-view='' class="fade"> ... </div>

And my css for fade class:

.fade {
    opacity: 1;
    transition: all 1s ease;
}
.fade.ng-enter,
.fade.ng-leave {
}
.fade.ng-enter {
    opacity: 0;
}
.fade.ng-enter-active {
    opacity: 1;
}
.fade.ng-leave {
    opacity: 1;
}
.fade.ng-leave-active {
    opacity: 0;
}
Mikhail
  • 101
  • 1
  • 5

1 Answers1

0

you will need to use some javascript here. There is a callback that is fired after an animation end, you just need to do the second after. So first add this code to handle the animation to all browsers (different web render engines)

var pfx = ["webkit", "moz", "MS", "o", ""];

prefixedEvent = function (element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
      if (!pfx[p]) type = type.toLowerCase();
      element.addEventListener(pfx[p]+type, callback, false);
    }
  }

  removePrefixedEvent = function (element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
      if (!pfx[p]) type = type.toLowerCase();
      element.removeEventListener(pfx[p]+type, callback, false);
    }
  }
  transitionEnded = function(elementToAnimate){
    removePrefixedEvent(elementToAnimate.srcElement, "TransitionEnd", transitionEnded);
    //do the new animation here eg: newElement.style.opacity = 1;
  }

And then when you do the first animation:

var elementToAnimate = document.getElementsByClass("fade")[0];
prefixedEvent(elementToAnimate, "TransitionEnd", transitionEnded);

Something like this ;)

goncalofalcao
  • 31
  • 3