Why Does Iron-Router onBeforeAction Logic Not Affect the DOM?

Question

I've decided to implement a quick little animation between pages for Meteor. The way I've decided to do this is by using a onBeforeAction hook, to set a DOM element to display:none, and then to animate it in with an onAfterAction.

The problem is, the element never disappears off the screen. I'm not sure what I'm doing wrong. Here's my route:

Router.route('/priority/:_id', {
  path: '/priority/:_id',
  template: 'priority',
  data: function(){
    return Priorities.findOne({_id: this.params._id})
  },
  onBeforeAction: function() {
    $('.show-title').css('display', 'none'); 
    this.next();
  }
  // ,
  // onAfterAction: function() {
  //   $('.show-title').velocity('transition.fadeIn', 1000);
  // }
})

And for reference, here's the template:

<template name="priority">
  <h1 class="show-title">Priority: {{title}}</h1>
</template>

Am I not understanding how to use these actions properly?

Answer 1

The hooks are called immediately, before the DOMs ready.

You need to do that in the template's rendered function instead:

Template.priority.rendered = function() {
    $('.show-title').css('display', 'none');
    $('.show-title').velocity('transition.fadeIn', 1000);
}