page transitions in meteor - not quite working?

Question

so in the back of the 'discover meteor' book they explain how to do page transitions. i've got it working, however it causes problems with the loading of javascript functions and variables on other pages that its animating into. it seems they're not ready or simply don't exist at the time the page is routed.

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();               
            }
        });           
    }
}
});

if i remove the above code then all my javascript variables and functions work correctly. does anyone have another working solution to page transitions using velocity.js ? i did find this one but its a year old and i couldn't get it to work at all, it just makes the content where '{> yield}' is go blank :(

also .. found this https://github.com/ccorcos/meteor-transitioner which seems to do exactly the same as above but as a package.. however i still get the same troubles :( — Timmy Lee, May 23 '15 at 22:34

score 0 · Accepted Answer · answered May 23 '15 at 22:57

Just a note for asking questions on stack overflow: "causes problems with the loading of javascript functions and variables" is pretty vague. Its best to give more specifics.

But anyways, you said here that you're using isotope to render items in a grid. I'm assuming you're calling $elements.isotope() within a Template[name].onRendered callback.

This is probably the issue because its trying to compute and rearrange into a grid the elements while they're hidden. Using display: none actually removed the elements, thus isotope can't compute the sizes, etc. for the layout. Try this:

insertElement: function(node, next) {
    $(node).css("opacity", 0).insertBefore(next)
    .delay(200)
    .velocity("transition.slideUpIn", {duration:1000, display:null})            
},

opacity: 0 should do what you're looking for. It will make them transparent without removing them from the transition.slideUpIn should animate opacity so you're good there.

Also, velocity transitions mess with the display property. Setting display: null in the animation options prevents it from setting the display to block or whatever it wants to do. This may or may not be necessary, but I pretty much always use it.

hi chet, totally understand regarding the vague nature of my post, apologies. thanks for the answer.. this works brilliantly! :D — Timmy Lee, May 23 '15 at 23:03

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

You could use:

onAfterAction

onBeforeAction

. The solution should be something like this:

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

 fadeContentIn = function() {
  $('#content').velocity('transition.fadeIn',1000);
}
  Router.onBeforeAction(animateContentOut)
  Router.onAfterAction(fadeContentIn)

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 07 '16 at 07:59

StefanL19

1,476
2
14
29

page transitions in meteor - not quite working?

2 Answers2