Transitions between views in a single page backbone app

Question

I want to use cool transitions like this - http://designdrizzle.com/15-amazing-page-transitions-effects-tutorials-in-jquery-and-css3/ - in a single page backbone app, but I don't know where to start. Do I have to change the way I instantiate all of my views (currently a typical swap_view method) in order to achieve effects like this? Or is there a straightforward gem that I just haven't found?

In my app (translator.herokuapp.com) I leave the header and just switch out views.

This is my first time doing front end work so any help would be appreciated!

Answer 1

Firstly lets checkout html mark-up of transitioned web page:

<div id="pt-main" class="pt-perspective">
    <div class="pt-page">
    <div class="pt-page">
    <div class="pt-page">
    <div class="pt-page page-current">
    <div class="pt-page">
    <div class="pt-page">
</div>

As you can see its very close with typical slider widget, but with full width and hight page size and different animation. Very close effect is in use on USA Today web site.

How it works and how to implement it with MArionette:

1) We need two Views types (lets call is CardsCollectionView and CardView):

var CardView = Marionette.ItemView.extend({
        className: '.pt-page',
        template: "#card-template"
    }),
    CardsCollectionView = Marionette.CollectionView.extend({
        childView: CardView
    });

2) Next Step we need to catch an event for switching between pages, i would place it into collectionView:

CardsCollectionView = Marionette.CollectionView.extend({
    childView: CardView,
    events: {
      'click .pt-page' : switchCard    
    },
    switchCard: function() {
        var currCard = this.$el.find('.pt-page.page-current'),
            nextCard = currCard.next() || this.$el.find('.pt-page').eg(0);

        currCard.removeClass('page-current');
        nextCard.addClass('page-current')
    }
});

3) Add CSS classes for animation effect you need.

Its very simpled example just to show logic steps to follow. Please consider that you may pahe different types of pages, may have Models to provide page data (in this case better keep current page position in model). Also expect an improvement to remove other cards but current and next for animation effect. I strongly recommend to dig into USA Today site code. It also use BB and it will be very useful in your case.

Answer 2

I found the first step to making this work with simple animations, and pasted my router below to help anyone else who has the same problem / is looking for a simple solutions without the major restructuring that might be necessary when using marionette.

The main point of interest is the _swapView method at the end of the code.

   TR.Routers.Router = Backbone.Router.extend({
    routes: {
        "": "home",
        "jobs/index": "indexJob",
        "jobs/new": "newJob",
        "jobs/:id": "showJob",
        "jobs/:id/download": "downloadJob",
        "home": "home",
        "profile": "profile",
        "translate": "translate",
        "charge": "charge",
        "contact": "contact"
  },

    showJob: function(id) {
        TR.jobs.fetch()
        var job = TR.jobs.getOrFetch(id)
        var view = new TR.Views.JobShow({model: job})
        this._swapView(view)
    },

    showUser: function(id) {
        TR.jobs.fetch();
        user = TR.users.getOrFetch(id)
        var view = new TR.Views.UserShow({
            model: user, collection: TR.jobs
        })

        this._swapView(view)
    },

    indexJob: function() {
        TR.jobs.fetch();
        TR.currentUser.fetch();
        var view = new TR.Views.JobsIndex({
            collection: TR.jobs,
            model: TR.currentUser
        })

        this._swapView(view)
    },

    newJob: function() {
        var view = new TR.Views.JobNew()
        this._swapView(view)
    },

    translate: function() {
        var view = new TR.Views.TranslateHome()
        this._swapView(view)
    },

    home: function() {
        var view = new TR.Views.Home()
        this._swapView(view)
    },

  _swapView: function (view) {
        var that = this
    if (this.currentView) { 
            this.currentView.$el.fadeOut(500, function() {
                that.currentView.remove()
            that.currentView = view;
                $('#main').html(view.render().$el.hide().fadeIn(500))
            //$('#main').html(view.render().$el);
            })
        } else {
        that.currentView = view;
        $('#main').html(view.render().$el);
        }
  }
});