Search code examples
jquerymeteoriron-router

iron router add css animation with onBefore and onAfter actions

How can I get animations going with iron router
A css class is added when a page is loaded
The css is from animate.css
The animation shows once but navigating to other pages doesn't fire the animation again.

router.coffee

Router.map ->
  @route "page1",
    path: "/",
  @route "page2",
    path: "/page2",

animateContentOut = (pause) ->
  $('#layout').addClass 'animated fadeIn'
  console.log ('fade in')

animateContentIn = ->
  $('#layout').removeClass 'animated fadeIn'
  console.log ('fade Out')
  this.next()

Router.onAfterAction animateContentOut
Router.onBeforeAction animateContentIn
Solution

  • The actions are called immediately, before the page is rendered.

    You need to do that in the template's rendered functions instead.

    Take a look here too:

    http://www.manuel-schoebel.com/blog/simple-page-transitions-with-iron-router-hooks https://atmospherejs.com/ccorcos/transitioner