Permalink
Browse files

Implemented CSS transitions with jquery and zepto fallbacks

  • Loading branch information...
1 parent 950d7fd commit f63e258ad40bcb613fd790e7a597809871c2e360 Kevin Malakoff committed Sep 23, 2012
Showing with 15,866 additions and 2,000 deletions.
  1. +28 −15 Bakefile.coffee
  2. +2 −2 README.md
  3. +4 −1 RELEASE_NOTES.md
  4. +3 −2 examples/pn-nt+_xui.html
  5. +1 −1 examples/pn-nt_zpt.html
  6. +4 −3 examples/pn-t-e_zpt_ko.html
  7. +4 −3 examples/pn-t_zpt.html
  8. +4 −3 examples/pnp-dt_zpt_pth.html
  9. +1 −1 examples/pnp-nt-i_xui_pth_kb.html
  10. +1 −1 examples/pnp-nt_xui_pth.html
  11. +1 −1 examples/pnp-nt_zpt_pth.html
  12. +7 −6 examples/pnp-t-e_jq_kb.html
  13. +7 −6 examples/pnp-t-i_jq_kb.html
  14. +5 −4 examples/pnp-t-nh_zpt_pth.html
  15. +7 −6 examples/pnp-t_jq_kb.html
  16. +5 −4 examples/pnp-t_zpt_bb.html
  17. +7 −6 examples/pnp-t_zpt_kb.html
  18. +5 −4 examples/pnp-t_zpt_pth.html
  19. +7 −6 examples/pnp-t_zpt_pth_ko.html
  20. +3 −3 examples/pns-e_jq_kb.html
  21. +3 −3 examples/pns-i_zpt_kb.html
  22. +3 −3 examples/pns_jq_kb.html
  23. +1 −1 examples/pns_zpt_bb.html
  24. +3 −3 examples/pns_zpt_kb.html
  25. +1 −1 examples/pns_zpt_pth.html
  26. +3 −3 examples/pns_zpt_pth_ko.html
  27. +206 −193 examples/vendor/knockback-core-stack-0.16.7.js
  28. +5 −5 index.html
  29. +12 −8 knockback-navigators.css
  30. +29 −77 knockback-page-navigator-panes.js
  31. +1 −1 knockback-page-navigator-panes.min.js
  32. +29 −76 knockback-pane-navigator.js
  33. +1 −1 knockback-pane-navigator.min.js
  34. +1,304 −0 knockback-transitions.css
  35. +294 −0 knockback-transitions.js
  36. +6 −0 knockback-transitions.min.js
  37. +0 −209 lib/knockback-sample-transitions-jquery.js
  38. +0 −6 lib/knockback-sample-transitions-jquery.min.js
  39. +2 −1 package.json
  40. +2 −2 packages/npm/README.md
  41. +12 −8 packages/npm/knockback-navigators.css
  42. +29 −76 packages/npm/knockback-page-navigator-panes.js
  43. +1 −1 packages/npm/knockback-page-navigator-panes.min.js
  44. +29 −76 packages/npm/knockback-pane-navigator.js
  45. +1 −1 packages/npm/knockback-pane-navigator.min.js
  46. +1,304 −0 packages/npm/knockback-transitions.css
  47. +294 −0 packages/npm/knockback-transitions.js
  48. +6 −0 packages/npm/knockback-transitions.min.js
  49. +0 −209 packages/npm/lib/knockback-sample-transitions-jquery.js
  50. +0 −6 packages/npm/lib/knockback-sample-transitions-jquery.min.js
  51. +12 −8 packages/nuget/Content/Scripts/knockback-navigators.css
  52. +29 −76 packages/nuget/Content/Scripts/knockback-page-navigator-panes.js
  53. +1 −1 packages/nuget/Content/Scripts/knockback-page-navigator-panes.min.js
  54. +29 −76 packages/nuget/Content/Scripts/knockback-pane-navigator.js
  55. +1 −1 packages/nuget/Content/Scripts/knockback-pane-navigator.min.js
  56. +1,304 −0 packages/nuget/Content/Scripts/knockback-transitions.css
  57. +294 −0 packages/nuget/Content/Scripts/knockback-transitions.js
  58. +6 −0 packages/nuget/Content/Scripts/knockback-transitions.min.js
  59. +0 −209 packages/nuget/Content/Scripts/lib/knockback-sample-transitions-jquery.js
  60. +0 −6 packages/nuget/Content/Scripts/lib/knockback-sample-transitions-jquery.min.js
  61. +2 −2 packages/nuget/package.nuspec
  62. +0 −1 src/knockback-page-navigator-panes/module-loader.js
  63. +0 −1 src/knockback-page-navigator-simple/module-loader.js
  64. +1 −1 src/knockback-pane-navigator/knockback-pane-navigator-helpers.coffee
  65. +24 −10 src/knockback-pane-navigator/knockback-pane-navigator.coffee
  66. +0 −1 src/knockback-pane-navigator/module-loader.js
  67. +0 −36 src/knockback-sample-transitions-jquery/knockback-transition-cover-vertical.coffee
  68. +0 −33 src/knockback-sample-transitions-jquery/knockback-transition-fade-in.coffee
  69. +0 −38 src/knockback-sample-transitions-jquery/knockback-transition-navigation-slide.coffee
  70. +4 −1 src/{knockback-sample-transitions-jquery → knockback-transitions}/component-imports.coffee
  71. +14 −0 src/knockback-transitions/css-transition-fade-in.coffee
  72. +14 −0 src/knockback-transitions/css-transition-slide-up.coffee
  73. +23 −0 src/knockback-transitions/css-transition-slide.coffee
  74. +23 −0 src/knockback-transitions/fallback-transition-fade-in.coffee
  75. +1 −1 ...y/knockback-transition-helpers.coffee → knockback-transitions/fallback-transition-helpers.coffee}
  76. +24 −0 src/knockback-transitions/fallback-transition-slide-up.coffee
  77. +28 −0 src/knockback-transitions/fallback-transition-slide.coffee
  78. +199 −0 src/knockback-transitions/knockback-transitions.styl
  79. +2 −3 src/{knockback-sample-transitions-jquery → knockback-transitions}/module-loader.js
  80. +37 −0 src/knockback-transitions/transition-helpers.coffee
  81. +30 −0 src/knockback-transitions/transition-saved-state.coffee
  82. +18 −0 src/shared/knockback-page-navigators.css
  83. +18 −0 src/shared/knockback-panes.css
  84. +0 −43 src/shared/knockback-transition-saved-state.coffee
  85. +4 −4 test/knockback-page-navigator-panes/test-amd.coffee
  86. +4 −4 test/knockback-page-navigator-panes/test.coffee
  87. +4 −4 test/knockback-page-navigator-simple/test-amd.coffee
  88. +4 −4 test/knockback-page-navigator-simple/test.coffee
  89. +1 −1 test/packaging/bundle-config.coffee
  90. +1,836 −0 test/vendor/knockback-core-0.16.6.js
  91. +207 −194 test/vendor/knockback-core-0.16.7.js
  92. +7,775 −0 test/vendor/knockback-core-stack-0.16.6.js
  93. +206 −193 test/vendor/knockback-core-stack-0.16.7.js
View
@@ -14,7 +14,6 @@ module.exports =
'src/knockback-pane-navigator/knockout-bindings.coffee'
'src/shared/knockback-page-navigator-helpers.coffee'
'src/shared/knockback-pane.coffee'
- 'src/shared/knockback-transition-saved-state.coffee'
]
knockback_page_navigator_simple:
@@ -39,20 +38,32 @@ module.exports =
'src/knockback-pane-navigator/knockback-pane-navigator-helpers.coffee'
'src/knockback-pane-navigator/knockout-bindings.coffee'
'src/shared/knockback-pane.coffee'
- 'src/shared/knockback-transition-saved-state.coffee'
]
- knockback_sample_transitions_jquery:
- join: 'knockback-sample-transitions-jquery.js'
- wrapper: 'src/knockback-sample-transitions-jquery/module-loader.js'
- output: 'lib'
+ knockback_transitions:
+ join: 'knockback-transitions.js'
+ wrapper: 'src/knockback-transitions/module-loader.js'
compress: true
files: [
- 'src/knockback-sample-transitions-jquery/component-imports.coffee'
- 'src/knockback-sample-transitions-jquery/knockback-transition-helpers.coffee'
- 'src/knockback-sample-transitions-jquery/knockback-transition-cover-vertical.coffee'
- 'src/knockback-sample-transitions-jquery/knockback-transition-fade-in.coffee'
- 'src/knockback-sample-transitions-jquery/knockback-transition-navigation-slide.coffee'
+ 'src/knockback-transitions/component-imports.coffee'
+ 'src/knockback-transitions/transition-helpers.coffee'
+ 'src/knockback-transitions/transition-saved-state.coffee'
+ 'src/knockback-transitions/css-transition-slide-up.coffee'
+ 'src/knockback-transitions/css-transition-fade-in.coffee'
+ 'src/knockback-transitions/css-transition-slide.coffee'
+ 'src/knockback-transitions/fallback-transition-helpers.coffee'
+ 'src/knockback-transitions/fallback-transition-slide-up.coffee'
+ 'src/knockback-transitions/fallback-transition-fade-in.coffee'
+ 'src/knockback-transitions/fallback-transition-slide.coffee'
+ ]
+ commands: [
+ 'stylus --use nib --out . src/knockback-transitions/knockback-transitions.styl'
+ ]
+
+ knockback_navigators_css:
+ commands: [
+ 'cat src/shared/knockback-page-navigators.css src/shared/knockback-panes.css > knockback-navigators.css'
+ 'cp src/knockback-transitions/knockback-transitions.css knockback-transitions.css'
]
publishing:
@@ -71,8 +82,9 @@ module.exports =
'cp knockback-page-navigator-simple.min.js packages/npm/knockback-page-navigator-simple.min.js'
'cp knockback-pane-navigator.js packages/npm/knockback-pane-navigator.js'
'cp knockback-pane-navigator.min.js packages/npm/knockback-pane-navigator.min.js'
- 'cp lib/knockback-sample-transitions-jquery.js packages/npm/lib/knockback-sample-transitions-jquery.js'
- 'cp lib/knockback-sample-transitions-jquery.min.js packages/npm/lib/knockback-sample-transitions-jquery.min.js'
+ 'cp knockback-transitions.js packages/npm/knockback-transitions.js'
+ 'cp knockback-transitions.min.js packages/npm/knockback-transitions.min.js'
+ 'cp knockback-transitions.css packages/npm/knockback-transitions.css'
# nuget
'cp knockback-navigators.css packages/nuget/Content/Scripts/knockback-navigators.css'
@@ -82,8 +94,9 @@ module.exports =
'cp knockback-page-navigator-simple.min.js packages/nuget/Content/Scripts/knockback-page-navigator-simple.min.js'
'cp knockback-pane-navigator.js packages/nuget/Content/Scripts/knockback-pane-navigator.js'
'cp knockback-pane-navigator.min.js packages/nuget/Content/Scripts/knockback-pane-navigator.min.js'
- 'cp lib/knockback-sample-transitions-jquery.js packages/nuget/Content/Scripts/lib/knockback-sample-transitions-jquery.js'
- 'cp lib/knockback-sample-transitions-jquery.min.js packages/nuget/Content/Scripts/lib/knockback-sample-transitions-jquery.min.js'
+ 'cp knockback-transitions.js packages/nuget/Content/Scripts/knockback-transitions.js'
+ 'cp knockback-transitions.min.js packages/nuget/Content/Scripts/knockback-transitions.min.js'
+ 'cp knockback-transitions.css packages/nuget/Content/Scripts/knockback-transitions.css'
]
tests:
View
@@ -24,7 +24,7 @@ Please see the [release notes](https://github.com/kmalakoff/knockback-navigators
**Optional/Non production**
-* knockback-sample-transitions-jquery.js [(min)](https://raw.github.com/kmalakoff/knockback-navigators/0.1.1/lib/knockback-sample-transitions-jquery.js) or [(dev)](https://raw.github.com/kmalakoff/knockback-navigators/0.1.1/lib/knockback-sample-transitions-jquery.min.js)
+* knockback-transitions.js [(min)](https://raw.github.com/kmalakoff/knockback-navigators/0.1.1/lib/knockback-transitions.js) or [(dev)](https://raw.github.com/kmalakoff/knockback-navigators/0.1.1/lib/knockback-transitions.min.js)
If you have some production quality transitions that you'd like to submit to the library, please [let me know](http://kmalakoff.github.com/knockback/issues).
@@ -35,7 +35,7 @@ Knockback-Navigators.js is compatible with RequireJS, CommonJS, Brunch and AMD m
* 'knockback-page-navigator-panes' - knockback-page-navigator-panes.js. Comes bundled with knockback-pane-navigator.js
* 'knockback-page-navigator-simple' - knockback-page-navigator-simple.js.
* 'knockback-pane-navigator-simple' - knockback-pane-navigator.js.
-* 'knockback-sample-transitions-jquery' - knockback-sample-transitions-jquery.js.
+* 'knockback-transitions' - knockback-transitions.js.
### Dependencies
View
@@ -3,12 +3,15 @@ Please refer to the following release notes when upgrading your version of Knock
## 0.1.2
* made pane navigator check for DOM changes using setInterval to ensure an active element is always present.
+* introduced css transitions and renamed sample-transtions-jquery to default-transitions
+* made TransitionSavedState internal to pane navigators and automatically save and restore
+* renamed transition animations: CoverVertical -> SlideUp and NavigationSlide -> Slide
## 0.1.1
* added AMD loader to all components.
* updated kb.loadUrl and added kb.loadUrlFn so they can be called directly from an HTML View
-* renamed knockback-sample-transitions to knockback-sample-transitions-jquery
+* renamed knockback-sample-transitions to knockback-transitions
* XUI bug fixed: reverse on panes and appending source code
## 0.1.0
View
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
<style type="text/css">
.cell {height: 120px; width: 120px; background-color: white} /* cell styling */
@@ -39,7 +40,7 @@
<script src="vendor/xui-2.3.2.js"></script>
<script src="../knockback-pane-navigator.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
var pane_navigator_el = $('.pane-navigator')[0];
@@ -52,7 +53,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- var el = $('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
+ var el = $('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
$('body')[0].appendChild(el);
</script>
View
@@ -51,7 +51,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
<style type="text/css">
.cell {height: 120px; width: 120px; background-color: white} /* cell styling */
@@ -22,7 +23,7 @@
<button class='btn btn-small' data-bind="click: kb.nextPane" data-path='^/.pane-navigator'><i class='icon-step-forward'></i></button>
<div class='cell' style='position: relative'>
- <div class='pane-navigator' data-bind="PaneNavigator: {transition: 'NavigationSlide'}">
+ <div class='pane-navigator' data-bind="PaneNavigator: {transition: 'Slide'}">
<div class='pane cell'>
<p>Pane1</p>
</div>
@@ -40,7 +41,7 @@
<script src="vendor/zepto-1.0rc1.js"></script>
<script src="vendor/knockout-2.1.0.js"></script>
<script src="../knockback-pane-navigator.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
ko.applyBindings({});
@@ -50,7 +51,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
View
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
<style type="text/css">
.cell {height: 120px; width: 120px; background-color: white} /* cell styling */
@@ -39,11 +40,11 @@
<script src="vendor/zepto-1.0rc1.js"></script>
<script src="../knockback-pane-navigator.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
var pane_navigator_el = $('.pane-navigator')[0];
- var pane_navigator = new kb.PaneNavigator(pane_navigator_el, {no_remove: true, transition: 'NavigationSlide'});
+ var pane_navigator = new kb.PaneNavigator(pane_navigator_el, {no_remove: true, transition: 'Slide'});
kb.utils.wrappedPaneNavigator(pane_navigator_el, pane_navigator); // cache the pane_navigator for use by kb. It should be released with kb.utils.wrappedPaneNavigator(pane_navigator_el, null)
pane_navigator.push(new kb.Pane(pane_navigator_el.children[0]));
</script>
@@ -52,7 +53,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>
@@ -41,14 +42,14 @@
<script src="vendor/zepto-1.0rc1.js"></script>
<script src="vendor/path-0.8.4.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
// Page Routing and Navigating
// Don't allow pages to be detached since they are owned by the DOM (default is to assume dynamic pages and to therefore detach)
////////////////////////////////////
- var page_navigator = new kb.PageNavigatorPanes($('#app')[0], {no_remove: true, transition: 'CoverVertical'});
+ var page_navigator = new kb.PageNavigatorPanes($('#app')[0], {no_remove: true, transition: 'SlideUp'});
Path.map('').to(page_navigator.dispatcher(function(){
page_navigator.loadPage($('#main')[0]);
}));
@@ -67,7 +68,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
@@ -70,7 +70,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- var el = $('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
+ var el = $('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
$('body')[0].appendChild(el);
</script>
@@ -65,7 +65,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- var el = $('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
+ var el = $('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
$('body')[0].appendChild(el);
</script>
@@ -65,7 +65,7 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
+ <link rel="stylesheet" href="../knockback-transitions.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>
@@ -32,7 +33,7 @@ <h1 data-bind="text: title"></h1>
<script src="vendor/jquery-1.8.0.js"></script>
<script src="vendor/knockback-core-stack-0.16.7.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
- <script src="../lib/knockback-sample-transitions-jquery.js"></script>
+ <script src="..//knockback-transitions.js"></script>
<script type='text/javascript'>
////////////////////////////////////
@@ -45,8 +46,8 @@ <h1 data-bind="text: title"></h1>
]);
// Initialize relationships between pages - NOTE: you can use BackboneRelational to automate this at model creation time (of course, this is just an example so you might not use models for your pages)
pages.get('main').set({next: pages.get('page1')});
- pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'NavigationSlide', inverse: true}, next: pages.get('page2')});
- pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'CoverVertical', inverse: true}});
+ pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'Slide', inverse: true}, next: pages.get('page2')});
+ pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'SlideUp', inverse: true}});
////////////////////////////////////
// ViewModels
@@ -78,13 +79,13 @@ <h1 data-bind="text: title"></h1>
router.route('page1', null, page_navigator.dispatcher(function(){
page_navigator.loadPage({
el: kb.renderTemplate('page', new PageViewModel(pages.get('page1'))),
- transition: 'NavigationSlide'
+ transition: 'Slide'
});
}));
router.route('page2', null, page_navigator.dispatcher(function(){
page_navigator.loadPage({
el: kb.renderTemplate('page', new PageViewModel(pages.get('page2'))),
- transition: 'CoverVertical'
+ transition: 'SlideUp'
});
}));
}
@@ -97,7 +98,7 @@ <h1 data-bind="text: title"></h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
- $('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
+ $('body').append($('<div><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>
</body>
Oops, something went wrong.

0 comments on commit f63e258

Please sign in to comment.