流星中的页面转换 - 不太有效？

Question

所以在“发现流星”一书的后面，他们解释了如何进行页面转换。我已经让它工作了，但是它会导致在其动画化的其他页面上加载 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

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

但无论如何，您说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)