Backbone Marionette iOS style page transitions

Question

I'm making a single page mobile app with Backbone.Marionette and would like to implement page slide transitions. I know how to achieve this via adding and removing the proper css classes for the animation but I'm having trouble with Marionette regions and managing when these classes are being added. I would like the current view in the region to slide out and the next view slide in. how can I accomplish this with regions or layouts in marionette? P.S i'm a newbie with marionette.

Answer 1

You'll need to write a custom Region implementation to facilitate the transition. There's an open ticket on Marionette that has the core code for making this work: https://github.com/marionettejs/backbone.marionette/issues/320#issuecomment-9746319

But you'll need to adjust this code for your specific needs. Be sure to read the comments and discussion around it. I've used this core code for similar needs many times, but haven't found the optimal way of integrating it in to marionette, yet.

Answer 2

Here is a custom region demonstrating view transitions: http://codepen.io/somethingkindawierd/pen/cpiEw