Question

如何使用铁制路由器进行动画制作加载页面时添加css类 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：过渡者

<强> Router.cofee

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

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

铁路由器使用onBefore和onAfter动作添加css动画

2 个答案: