Как мне изменить страницу при изменении маршрутов?

Question

Im работает над приложением на основе метеорита для мобильных устройств, и, как результат, я пытаюсь сделать некоторые элементы анимированными, когда вы покидаете шаблон. Im в настоящее время тупит, хотя, как отложить запуск маршрута, пока не будет запущена анимация. Я в порядке с настройкой задержки специально и просто подгоняю все анимации в этот таймер.

Итак, что я пытался сделать до сих пор, используется функция «onStop» для железных маршрутизаторов, чтобы вызвать анимацию скорости, Ive также попытался использовать обратный вызов 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 и анимацию.