added the other transitions from jQtouch.

docs/pages/docs-transitions.html

@@ -32,6 +32,9 @@
 		<a href="index.html" data-role="button" data-transition="pop">pop</a>
 		<a href="index.html" data-role="button" data-transition="flip">flip</a>
 		<a href="index.html" data-role="button" data-transition="fade">fade</a>
+		<a href="index.html" data-role="button" data-transition="swap">swap</a>
+		<a href="index.html" data-role="button" data-transition="cube">cube</a>
+		<a href="index.html" data-role="button" data-transition="dissolve">dissolve</a>
 		</p>
 
 			

js/jquery.mobile.js

@@ -44,7 +44,7 @@
 		startPageId = 'ui-page-start',
 		activePageClass = 'ui-page-active',
 		pageTransition,
-		transitions = 'slide slideup slidedown pop flip fade dissolve swap',
+		transitions = 'slide slideup slidedown pop flip fade dissolve swap dissolve cube',
 		transitionDuration = 350,
 		backBtnText = "Back",
 		urlStack = [ {

themes/default/jquery.mobile.transitions.css

@@ -13,8 +13,8 @@
   	to {-webkit-transform: rotate(360deg);}
 }
 
-/*
--- transitions from jQtouch - to be modified, renamed, removed, where needed
+/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
+Built by David Kaneda and maintained by Jonathan Stark.
 */
 .in, .out {
 	-webkit-animation-timing-function: ease-in-out;
@@ -116,7 +116,6 @@
     from { -webkit-transform: translateY(0); }
     to { -webkit-transform: translateY(-100%); }
 }
-
 @-webkit-keyframes fadein {
     from { opacity: 0; }
     to { opacity: 1; }
@@ -133,7 +132,14 @@
 }
 .fade.out {
 	z-index: 0;
-	-webkit-animation-name: fadeout;
+}
+
+.dissolve.in {
+	-webkit-animation-name: fadein;
+}
+
+.dissolve.out {
+	-webkit-animation-name: fadeout;	
 }
 
 .flip {
@@ -148,8 +154,6 @@
 	-webkit-animation-name: flipouttoleft;
 }
 
-/* Shake it all about */
-
 .flip.in.reverse {
 	-webkit-animation-name: flipinfromright;
 }
@@ -178,12 +182,150 @@
     to { -webkit-transform: rotateY(180deg) scale(.8); }
 }
 
-/* dontmove is used for elements that stay still but still need a complete callback */
+/* Hackish, but reliable. */
+
 @-webkit-keyframes dontmove {
     from { opacity: 1; }
     to { opacity: 1; }
 }
 
+.swap {
+	-webkit-transform: perspective(800);
+	-webkit-animation-duration: .7s;
+}
+.swap.out {
+	-webkit-animation-name: swapouttoleft;
+}
+.swap.in {
+	-webkit-animation-name: swapinfromright;
+}
+.swap.out.reverse {
+	-webkit-animation-name: swapouttoright;
+}
+.swap.in.reverse {
+	-webkit-animation-name: swapinfromleft;
+}
+
+
+@-webkit-keyframes swapouttoright {
+    0% {
+        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
+        -webkit-animation-timing-function: ease-in-out;
+    }
+    50% {
+        -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
+        -webkit-animation-timing-function: ease-in;
+    }
+    100% {
+        -webkit-transform:  translate3d(0px, 0px, -800px) rotateY(70deg);
+    }
+}
+
+@-webkit-keyframes swapouttoleft {
+    0% {
+        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
+        -webkit-animation-timing-function: ease-in-out;
+    }
+    50% {
+        -webkit-transform:  translate3d(180px, 0px, -400px) rotateY(-20deg);
+        -webkit-animation-timing-function: ease-in;
+    }
+    100% {
+        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
+    }
+}
+
+@-webkit-keyframes swapinfromright {
+    0% {
+        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
+        -webkit-animation-timing-function: ease-out;
+    }
+    50% {
+        -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
+        -webkit-animation-timing-function: ease-in-out;
+    }
+    100% {
+        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
+    }
+}
+
+@-webkit-keyframes swapinfromleft {
+    0% {
+        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
+        -webkit-animation-timing-function: ease-out;
+    }
+    50% {
+        -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
+        -webkit-animation-timing-function: ease-in-out;
+    }
+    100% {
+        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
+    }
+}
+
+.cube {
+    -webkit-animation-duration: .55s;
+}
+
+.cube.in {
+	-webkit-animation-name: cubeinfromright;
+    -webkit-transform-origin: 0% 50%;
+}
+.cube.out {
+	-webkit-animation-name: cubeouttoleft;
+    -webkit-transform-origin: 100% 50%;
+}
+.cube.in.reverse {
+	-webkit-animation-name: cubeinfromleft;	
+    -webkit-transform-origin: 100% 50%;
+}
+.cube.out.reverse {
+	-webkit-animation-name: cubeouttoright;
+    -webkit-transform-origin: 0% 50%;
+
+}
+
+@-webkit-keyframes cubeinfromleft {
+	from {
+        -webkit-transform: rotateY(-90deg) translateZ(320px);
+        opacity: .5;
+	}
+    to {
+        -webkit-transform: rotateY(0deg) translateZ(0);
+        opacity: 1;
+    }
+}
+@-webkit-keyframes cubeouttoright {
+    from {
+        -webkit-transform: rotateY(0deg) translateX(0);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: rotateY(90deg) translateZ(320px);
+        opacity: .5;
+    }
+}
+@-webkit-keyframes cubeinfromright {
+    from {
+        -webkit-transform: rotateY(90deg) translateZ(320px);
+        opacity: .5;
+    }
+    to {
+        -webkit-transform: rotateY(0deg) translateZ(0);
+        opacity: 1;
+    }
+}
+@-webkit-keyframes cubeouttoleft {
+    from {
+        -webkit-transform: rotateY(0deg) translateZ(0);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: rotateY(-90deg) translateZ(320px);
+        opacity: .5;
+    }
+}
+
 .pop {
 	-webkit-transform-origin: 50% 50%;
 }