Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Page transitions in meteor?

I've got a meteor mobile app structurally working; I really need to stitch the views together with some page transitions.

I looked at the iron-transitioner project but it looks like development has ceased? (last commit 6 months ago, still using Spark engine)

I've also looked at a few UI 'mobile frameworks' (Ratchet, Framework7) but I couldn't get them to play nicely with the meteor server.

I'm wondering if anyone knows of any other simple (left/right) page transition package / script that I could try? It's just to give my UI some (expected) slickness really.

like image 605
BellamyStudio Avatar asked Mar 20 '23 14:03

BellamyStudio


1 Answers

What about some jQuery with IronRouter?

Router.configure({
  load: function() {
    $('.content').animate({
      left: "-1000px",
      scrollTop: 0
    }, 400, function() {
        $(this).animate({ left: "0px" }, 400);
    });
});

What I also do to make a smooth transition between pages is to use a simple fadeIn/fadeOut.

Router.configure({
  load: function() {
    $('html, body').animate({
      scrollTop: 0
    }, 400);
    $('.content').hide().fadeIn(800);
  }
});
like image 179
Julien Le Coupanec Avatar answered Mar 27 '23 20:03

Julien Le Coupanec