0

所以在“发现流星”这本书的后面，他们解释了如何进行页面转换。我已经让它工作了，但是它会导致在其动画进入的其他页面上加载 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}”的内容变为空白:(

4

2 回答 2

0

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

但无论如何，您在这里说过您正在使用同位素来渲染网格中的项目。我假设您在$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可防止它将显示设置为阻止或任何它想做的事情。这可能是必要的，也可能不是必要的，但我几乎总是使用它。

于 2015-05-23T22:57:48.797 回答
0

你可以使用：

onAfterAction

onBeforeAction

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

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

 fadeContentIn = function() {
  $('#content').velocity('transition.fadeIn',1000);
}
  Router.onBeforeAction(animateContentOut)
  Router.onAfterAction(fadeContentIn)
于 2016-01-07T07:59:45.187 回答