我如何在更改路線時爲頁面添加動畫？

Question

我正在爲基於流動的移動應用程序工作，因此，我試圖在離開模板時使某些元素變爲動畫。儘管就如何推遲路線從跑步，直到動畫運行之後，我目前都陷入了困境。我可以專門設置延遲，只需將所有動畫放入該定時器即可。

所以我到目前爲止所做的嘗試是使用Iron Routers「onStop」函數來觸發一個速度動畫，我也嘗試過使用Template.foo.destroyed回調，但是當我可以寫動畫時，我不能讓他們出現在下一個模板加載之前。我願意嘗試其他的東西，如果它是一種更可靠的方式來觸發基於路線變化的動畫。

Answer 1

Meteor will be getting better support for animations in the future.

現在，你可以使用流星的無證_uihooks功能。例如，假設你有一個名爲layout佈局模板，您的所有路線的渲染直接父容器內的頂級元素的模板從layout：

<template name="layout"> 
    {{> banner}} 
    {{> main}} 
</template> 

<template name="main"> 
    <main> 
    {{> yield}} 
    </main> 
</template> 

<template name="home"> 
    <article> 
    <!-- Home page content wrapped in a container --> 
    </article> 
</template> 

<template name="posts"> 
    <article> 
    <!-- Route content wrapped in a container --> 
    </article> 
</template> 

<template name="loading"> 
    <div> 
    <i class="fa fa-spinner fa-spin"></i> 
    </div> 
</template> 

Template.main.rendered = function() { 
    var $window = $(window); 
    var main = this.firstNode; 

    main._uihooks = { 
    insertElement: function(node, next) { 
     var newPage = $(node); 

     newPage.css("opacity", 0); 
     main.insertBefore(node, next); 
     newPage.animate({opacity: 1}, 300); 
    }, 
    removeElement: function(node) { 
     var oldPage = $(node); 
     var offset = oldPage.offset(); 

     // Position the route container to be removed so that it doesn't get 
     // pushed down by the new route's template. 
     // This may be different for you depending on your layout. 
     oldPage.css({ 
     width: oldPage.innerWidth(), 
     position: 'absolute', 
     top: offset.top - $window.scrollTop(), 
     left: offset.left 
     }).animate({opacity: 0}, 300, function() { 
     oldPage.remove(); 
     }); 

     $window.scrollTop(0); 
    } 
    }; 
}; 

請注意，根據您的佈局和你想要的動畫的複雜性，你或許可以使用類和CSS轉換來完成這項工作，而不是強制設置CSS屬性和動畫。