Animation.css and eventHooks and event.originalEvent.animationName


#1

I have a rather weird problem since today when pushing a new version of my app to Galaxy.

For over a year I have been using animation.css to add some simple page change animations to my app. It basically works like this, a template contains a div with class animation slideIn.

When leaving the page (route change), I want the page to fade out first before the route actually changes, so I register an event handler in the template that fires on animationend. When the animation that ended is NOT the one used for first displaying the page.

Since today a minified app does not resolve the event.originalEvent.animationName anymore but instead carries a random alphanumerical letter.

I have no explanation for that. Anybody got a hint? I recently upgraded my app to 1.6.1 and believe this started happening since then.

Template.animatedPage.onRendered(function(){
 template = this;
 template.$(
   "div.animation"
  ).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
   function(event) {
      console.log('animation over', event.originalEvent.animationName);
      if (event.originalEvent.animationName != 'slideIn') {
         // do something when the animation is not slideIn
      }
   }
  );
});
Template.animatedPage.events({
 'click button.leavePage'(event, template){
  template.$('div.animation').removeClass('slideIn').addClass('slideOut');
 }
});

#2

OK, I can confirm that running the minifier in 1.6.1 garbles strings inside css. Downgraded to 1.6.0.1 and this did not happen.

Running the project with meteor run --production changes this

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

into this

.bounce {
    -webkit-animation-name: a;
    animation-name: a;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

I fixed it in animate.css and put the strings into quotes


#3

I filed a bug against it https://github.com/meteor/meteor/issues/9633