Page transitions in meteor?

Question

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.

Answer 1

I had a similar question here. Let us know how the above JQ method works out! Perpahs if you add transit.js you'll get nice hardware transitions. FWIW I think the Percolate team are using a version of IronTransitioner for their Verso mobile app, which has some nice CSS3 transitions. Did you try the IronTransitioner package? As you say /devel/ even hasn't been touched for 6 months.

EDIT percolateStudio fork of IT has this comment "Alright, pretty much seems to be working with blaze."

Answer 2

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

Answer 3

I suggest using the animate.css library and adding animate classes to the main content in your templates. My 'main' templates now look like this:

<template name='home'>
{{> navbar}}

<div class="container animated fadeIn" id="content">
    {{> startBox}}
</div>

{{> notification}}

<div id='background-image'></div>
<div id='background-color'></div>

{{> footer}}</template>