Moved the transition sampler page to a multi-page format to avoid the loader every time you want to try a transition. Leaving the old page here for now because we may link to it elsewhere.

Author: toddparker

docs/pages/page-transitions.html

@@ -33,12 +33,12 @@ <h2>Page transitions</h2>
 </code></code>
 
 		<p>
-		<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slide" data-prefetch>slide</a>
-		<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
-		<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
-		<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
-		<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="fade">fade</a>
-		<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="flip">flip *</a>
+		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
+		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
+		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
+		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
+		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade">fade</a>
+		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="flip">flip *</a>
 		</p>
 
         <p>NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.</p>
@@ -83,6 +83,24 @@ <h3>More in this section</h3>
 			</div>
 
 			</div><!-- /page -->
+			
+			
+			
+			
+			
+			<div data-role="page" id="dialog"><!-- dialog-->
+
+				<div data-role="header" data-theme="e">
+					<h1>Ta-da!</h1>
+				</div><!-- /header -->
+
+				<div data-role="content" data-theme="e">
+					<p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p>
+					<p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p>
+					<p>What do you think?</p>
+					<a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">I like it</a>   
+				</div>
+			</div>
 
 			</body>
 			</html>