meteor 中的页面转换 - 效果不佳？

Question

所以在 'discover 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 进行页面转换的有效解决方案？我确实找到了 this one，但它已经用了一年了，我根本无法让它工作，它只会让 '{> yield}' 的内容变成空白:(

Answer 1

只是一个关于堆栈溢出问题的注释："causes problems with the loading of javascript functions and variables" 非常模糊。最好能详细点。

但无论如何，您说过 here 您正在使用同位素在网格中呈现项目。我假设您在 Template[name].onRendered 回调中调用 $elements.isotope()。

这可能是问题所在，因为它试图计算隐藏的元素并将其重新排列到网格中。使用 display: none 实际上删除了元素，因此同位素无法计算布局的大小等。试试这个：

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

opacity: 0 应该可以满足您的需求。它将使它们变得透明，而无需将它们从 transition.slideUpIn 应该动画不透明度中删除，所以你在那里很好。

此外，速度转换会干扰显示属性。在动画选项中设置 display: null 可防止其将显示设置为阻塞或任何它想做的事情。这可能是必要的，也可能不是必要的，但我几乎总是使用它。

Answer 2

您可以使用：

onAfterAction

onBeforeAction

。解决方案应该是这样的：

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

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

meteor 中的页面转换 - 效果不佳？

page transitions in meteor - not quite working?

meteor

iron-router

velocity.js