Question

我决定在Meteor的页面之间实现一个快速的小动画。我决定这样做的方法是使用onBeforeAction钩子，将DOM元素设置为display:none，然后使用onAfterAction为其设置动画。

问题是，元素永远不会从屏幕上消失。我不确定我做错了什么。这是我的路线：

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);
  // }
})

供参考，这是模板：

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

我不理解如何正确使用这些行为吗？

Answer 1

在准备好DOM之前立即调用挂钩。

您需要在模板的渲染功能中执行此操作：

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

为什么Iron-Router onBeforeAction逻辑不会影响DOM？

1 个答案: