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，但是它已经有一年了，我根本无法让它工作，只是将内容放在'{＆gt; yield}'变成空白:(

Answer 1

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

但无论如何，你说here你正在使用同位素来渲染网格中的项目。我假设您在$elements.isotope()回调中呼叫Template[name].onRendered。

这可能是个问题，因为它试图在隐藏元素时计算并重新排列到网格中。使用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)

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

2 个答案: