meteor中的页面转换-不太正常？

所以在《发现流星》一书的后面，他们解释了如何进行页面转换。我已经让它工作了，但是它会导致在其他页面上加载javascript函数和变量时出现问题。它们似乎还没有准备好，或者在页面路由时根本不存在

Template.layout.onRendered(function() {
this.find('.pos-rel')._uihooks = {
    insertElement: function(node, next) {
        $(node).hide().insertBefore(next)
        .delay(200)
        .velocity("transition.slideUpIn", 1000)            
    },
    removeElement: function(node) {
        $(node).velocity({
            opacity: 0,             
        }, 
        {
        duration: 100,
            complete: function() {
                $(this).remove();               
            }
        });           
    }
}
});

---

如果我删除了上面的代码，那么我所有的javascript变量和函数都能正常工作。是否有人使用velocity.js来解决页面转换问题？我确实发现，但它已经一年了，我根本无法让它工作，它只是让“{>yield}”的内容变成空白：（

只是一个关于堆栈溢出问题的提示：“导致javascript函数和变量加载问题”非常模糊。最好给出更多细节

但无论如何，您说过您正在使用同位素在网格中渲染项目。我假设您正在调用

模板[name].onRendered

回调中的

$elements.同位素（）

这可能是因为它试图在元素隐藏时计算并重新排列到网格中。使用

display:none

实际上删除了元素，因此无法计算布局的大小等。请尝试以下操作：

insertElement: function(node, next) {
    $(node).css("opacity", 0).insertBefore(next)
    .delay(200)
    .velocity("transition.slideUpIn", {duration:1000, display:null})            
},

opacity:0

应该满足您的要求。它将使它们透明，而不会将它们从

过渡中移除。slideUpIn

应该设置不透明度动画，这样您在那里就很好了

此外，速度变换会弄乱显示属性。在动画选项中设置

display:null

会阻止它将显示设置为块或任何它想做的事情。这可能是必要的，也可能不是必要的，但我几乎总是使用它。

您可以使用：

后遗症

事前

。解决方案应如下所示：

 animateContentOut = function() {
     $('#content').css('display', 'none');
     this.next();
}

 fadeContentIn = function() {
  $('#content').velocity('transition.fadeIn',1000);
}
  Router.onBeforeAction(animateContentOut)
  Router.onAfterAction(fadeContentIn) 

---

另外，我发现这似乎和上面的完全一样，但是作为一个包。但是我仍然遇到同样的麻烦：（嗨，切特，完全理解我的帖子的模糊性，抱歉。谢谢你的回答。这非常有效！：D