如何使用Iron Router显示动画？

Question

我正在使用流星＆amp; IronRouter，并在模板准备好/渲染时尝试做一些javascript驱动的动画。

但是，IR挂钩事件似乎不应该触发它们。

onBeforeAction和onAfterAction似乎只在渲染新页面之前触发。 因此没有更新的DOM来制作动画。

我也试过覆盖动作，自己调用渲染，然后动画。 但是，即使使用Meteor.defer

，DOM仍未更新

    action: ->          
        this.render()  # works ok
        Meteor.defer ->
            Template.SceneView.animateScene()  

当旧模板存在时，仍然会调用它。我猜是因为Meteor仍在异步更新，所以defer（）并没有真正推迟......

因此，解决这个问题的方法是从模板本身调用animate函数，然后使用Meteor.defer调用动画，以便更新DOM。

Blaze rendered() hook仅在模板创建时触发一次。

另外在Blaze中有一些新的ui_hooks，但这些似乎是在插入或删除之前发生的。我想我可以使用它并接管整个DOM操作，但是当页面准备就绪时只是播放一些动画似乎有些过分... https://github.com/percolatestudio/transition-helper/blob/master/transition-helper.js

Answer 1

更新。我发现了about the afterFlush event

所以似乎有反应模板，不知何故使延迟时间不起作用。 相反，如果我使用以下内容，DOM将及时更新动画触发器。

    action: ->          
        this.render()
        Deps.afterFlush ->
            Template.SceneView.animateScene()

Answer 2

如果您的应用中有一个类似animate.css的包（http://daneden.github.io/animate.css/），您也可以使用普通css

如果你在模板顶部的div或元素上有这个类animated bounceIn，它也会在模板进入视图时显示动画。