iron router 添加 css 带有 onBefore 和 onAfter 动作的动画

Question

如何让动画与 iron router 一起运行
加载页面时添加css class
css 来自 animate.css
动画显示一次但导航到其他页面不会再次触发动画。

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

Answer 1

在呈现页面之前立即调用操作。

您需要在模板的呈现函数中执行此操作。

这里也看看：

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

Answer 2

这有效

流星添加ccorcos:transitioner

Router.cofee

Router.onBeforeAction ->
  $('#layout').css('display', 'none')
  this.next()

Router.onAfterAction ->
  $('#layout').velocity('transition.fadeIn',500)

iron router 添加 css 带有 onBefore 和 onAfter 动作的动画

iron router add css animation with onBefore and onAfter actions

jquery

meteor

iron-router