angular js animation based on media query not working on window resize

Question

Please see the following plunker example: http://plnkr.co/edit/e7Pr3O8mAaONiDiXFQay?p=preview

It's a simple Angular.js animation setup which i have taken from the ng docs.

I adapted it to have a Media query (on the css file), so the animation will ONLY work in case the screen width is less than 640px. When the screen is bigger than 640px the div will only show/hide without animation.

Its works great on page reload. But, when i re-size the page to "test for responsiveness" the animation does not happen anymore.

Can you shed some light on WHY this is happening, and is it fixable somehow?

Your help is highly appreciated! Thanks

Answer 1

Well, it does seem like an Angular.js animate bug. It seems that if a class doesn't have an ng-amination registered for it, it never tries to check if it has animations ever again (at least until the page is reloaded). A possible explanation (I am speculating here) might be that Angular.js unregisters whatever listeners it might have had on a class, on error.

Anyway, you can fix this by adding a complementary min-width declaration, with an instant animation, covering all the available resolutions.

For example:

@media only screen and (min-width : 640px) {

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

  .animate-show-hide.ng-hide-add.ng-hide-add-active,
  .animate-show-hide.ng-hide-remove {
    opacity:0;
  }

  .animate-show-hide.ng-hide-add,
  .animate-show-hide.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
  }
}

Important! Please note that I have used very short animation intervals, instead of 0. This is because if the animation length is 0 - it gets optimized away, leading to the same bug.