Page Transitions in Backbone

Developer
Mike Fowler
Size
3,691 Kb
Views
50,575

How do I make an page transitions in backbone?

An opinionated way to implement page transitions in a Backbone.js application. Part of a larger post found here: http://mikefowler.me/2013/11/18/page-transitions-in-backbone/. What is a page transitions in backbone? How do you make a page transitions in backbone? This script and codes were developed by Mike Fowler on 21 August 2022, Sunday.

Page Transitions in Backbone Previews
IQ Test

Page Transitions in Backbone - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Page Transitions in Backbone</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
body { margin: 0; padding: 0; font: 150% Futura-Medium, Futura, sans-serif; color: #333;
}
h1 { font-weight: normal;
}
a { color: #F2994B;
}
.page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1em; text-align: center; transition: transform 0.5s ease; transform: translate3d(100%, 0, 0);
}
.page a { color: white;
}
.page.is-visible { transform: translate3d(0, 0, 0);
}
.home { color: white; background: #F2CF66;
}
.activity { color: white; background: #F2994B;
}
.footer { position: fixed; bottom: 0; left: 0; width: 100%; padding: 10px; background: white; z-index: 10;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <footer class="footer" role="contentinfo"> <p>This demo is part of a post by Mike Fowler titled <a href="http://mikefowler.me/2013/11/18/page-transitions-in-backbone" target="page-transitions-in-backbone">“Page Transitions in Backbone”</a>.</p>
</footer>
<script type="text/template" name="home"> <h1>Home</h1> <p><a href="#/activity">Activity &rarr;</a></p>
</script>
<script type="text/template" name="activity"> <h1>Activity</h1> <p><a href="#/">&larr; Home</a></p>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Page Transitions in Backbone - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { margin: 0; padding: 0; font: 150% Futura-Medium, Futura, sans-serif; color: #333;
}
h1 { font-weight: normal;
}
a { color: #F2994B;
}
.page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1em; text-align: center; transition: transform 0.5s ease; transform: translate3d(100%, 0, 0);
}
.page a { color: white;
}
.page.is-visible { transform: translate3d(0, 0, 0);
}
.home { color: white; background: #F2CF66;
}
.activity { color: white; background: #F2994B;
}
.footer { position: fixed; bottom: 0; left: 0; width: 100%; padding: 10px; background: white; z-index: 10;
}

Page Transitions in Backbone - Script Codes JS Codes

(function () { window.app = { Views: {}, Extensions: {}, Router: null, init: function () { this.instance = new app.Views.App(); Backbone.history.start(); } }; $(function() { window.app.init(); }); app.Router = Backbone.Router.extend({ routes: { 'activity': 'activity', '': 'home' }, home: function () { var view = new app.Views.Home(); app.instance.goto(view); }, activity: function () { var view = new app.Views.Activity(); app.instance.goto(view); } }); app.Extensions.View = Backbone.View.extend({ initialize: function () { this.router = new app.Router(); }, render: function(options) { options = options || {}; if (options.page === true) { this.$el.addClass('page'); } return this; }, transitionIn: function (callback) { var view = this, delay var transitionIn = function () { view.$el.addClass('is-visible'); view.$el.one('transitionend', function () { if (_.isFunction(callback)) { callback(); } }) }; _.delay(transitionIn, 20); }, transitionOut: function (callback) { var view = this; view.$el.removeClass('is-visible'); view.$el.one('transitionend', function () { if (_.isFunction(callback)) { callback(); }; }); } }); app.Views.App = app.Extensions.View.extend({ el: 'body', goto: function (view) { var previous = this.currentPage || null; var next = view; if (previous) { previous.transitionOut(function () { previous.remove(); }); } next.render({ page: true }); this.$el.append( next.$el ); next.transitionIn(); this.currentPage = next; } }); app.Views.Home = app.Extensions.View.extend({ className: 'home', render: function () { var template = _.template($('script[name=home]').html()); this.$el.html(template()); return app.Extensions.View.prototype.render.apply(this, arguments); } }); app.Views.Activity = app.Extensions.View.extend({ className: 'activity', render: function () { var template = _.template($('script[name=activity]').html()); this.$el.html(template()); return app.Extensions.View.prototype.render.apply(this, arguments); } });
}());
Page Transitions in Backbone - Script Codes
Page Transitions in Backbone - Script Codes
Home Page Home
Developer Mike Fowler
Username mikefowler
Uploaded August 21, 2022
Rating 4
Size 3,691 Kb
Views 50,575
Do you need developer help for Page Transitions in Backbone?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mike Fowler (mikefowler) Script Codes
Name
Coverflow
Image Markers
Map Locator Marker
A Pen by Mike Fowler
Nickname generator
IOS7 Geolocation Map Marker
Rounded Avatar
Mixtape
Navigation Indicator
Coverflow Animation
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!