流星中的頁面轉換 - 不太有效？

所以在'發現流星'的書後面，他們解釋瞭如何做頁面轉換。我已經得到它的工作，但它會導致加載的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}'變成空白的內容:(

來源

2015-05-23 Timmy Lee

也..發現這個https://github.com/ccorcos/meteor-transitioner這似乎做同樣同上，但作爲一個整體。但是我仍然得到同樣的麻煩:( –

只是在堆棧上提問溢出：「導致加載的javascript函數和變量的問題」非常模糊，最好給出更多細節

但是無論如何，你說，你說的是使用同位素來渲染網格物品，假設你在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可防止將顯示設置爲阻止或任何想要的操作。這可能或可能不是必要的，但我幾乎總是使用它。

來源

2015-05-23 22:57:48 Chet

嗨切特，完全理解我的帖子的模糊性質，道歉。謝謝你的答案..這工作出色！：D –

你可以使用：

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-07 07:59:45 StefanL19

流星中的頁面轉換 - 不太有效？

回答

相關問題