Showing with 33 additions and 94 deletions.

+28 −92 css/structure/jquery.mobile.panel.css

+5 −2 js/widgets/panel.js
diff --git a/css/structure/jquery.mobile.panel.css b/css/structure/jquery.mobile.panel.css
@@ -23,11 +23,18 @@
 .ui-panel-display-reveal,
 .ui-panel-content-wrap,
 .ui-panel-dismiss {
-	-webkit-transition: margin-left 250ms ease, margin-right 250ms ease, -webkit-transform 250ms ease;
-	-moz-transition: margin-left 250ms ease, margin-right 250ms ease, -moz-transform 250ms ease;
-	-o-transition: margin-left 250ms ease, margin-right 250ms ease, -o-transform 250ms ease;
-	-ms-transition: margin-left 250ms ease, margin-right 250ms ease, -ms-transform 250ms ease;
-	transition: margin-left 250ms ease, margin-right 250ms ease, transform 250ms ease;
+	-webkit-transition: -webkit-transform 250ms ease;
+	-moz-transition:  -moz-transform 250ms ease;
+	-o-transition: -o-transform 250ms ease;
+	-ms-transition: -ms-transform 250ms ease;
+	transition: transform 250ms ease;
+}
+.ui-panel-content-wrap-open-complete{
+	-webkit-transition: none;
+	-moz-transition:  none;
+	-o-transition: none;
+	-ms-transition: none;
+	transition: none;
 }
 .ui-panel-display-overlay,
 .ui-panel-display-push,
@@ -136,117 +143,46 @@
 
 @media all and (min-width: 35em){
 	.ui-panel{
-		max-width: 28em;
+		width: 28em;
 	}
-	.ui-panel-content-wrap.reveal-left, .ui-panel-dismiss-open.reveal-left, .ui-panel-dismiss-open.overlay-left{
+	.ui-panel-content-wrap.reveal-left, .ui-panel-dismiss-open.reveal-left, .ui-panel-dismiss-open.overlay-left,
+	.ui-panel-content-wrap.push-left, .ui-panel-dismiss-open.push-left{
 		-webkit-transform: translateX(28em);
 		-moz-transform: translateX(28em);
 		-ms-transform: translateX(28em);
 		-o-transform: translateX(28em);
 		transform: translateX(28em);
 	}
-	.ui-panel-content-wrap.reveal-right, .ui-panel-dismiss-open.reveal-right, .ui-panel-dismiss-open.overlay-right {
+	.ui-panel-content-wrap.reveal-right, .ui-panel-dismiss-open.reveal-right, .ui-panel-dismiss-open.overlay-right,
+	.ui-panel-content-wrap.push-right, .ui-panel-dismiss-open.push-right{
 		-webkit-transform: translateX(-28em);
 		-moz-transform: translateX(-28em);
 		-ms-transform: translateX(-28em);
 		-o-transform: translateX(-28em);
 		transform: translateX(-28em);
 	}
-	.ui-panel-content-wrap.push-left, .ui-panel-dismiss-open.push-left{
+	.ui-panel-content-wrap-open-complete.push-left, .ui-panel-dismiss-open.push-left,
+	.ui-panel-content-wrap-open-complete.push-right, .ui-panel-dismiss-open.push-right{
 		-webkit-transform: translateX(0);
 		-moz-transform: translateX(0);
 		-ms-transform: translateX(0);
 		-o-transform: translateX(0);
 		transform: translateX(0);
+	}
+	.ui-panel-content-wrap-open-complete.push-left{
 		margin-left: 28em;
 	}
-	.ui-panel-content-wrap.push-right, .ui-panel-dismiss-open.push-right{
-		-webkit-transform: translateX(0);
-		-moz-transform: translateX(0);
-		-ms-transform: translateX(0);
-		-o-transform: translateX(0);
-		transform: translateX(0);
+	.ui-panel-content-wrap-open-complete.push-right{
 		margin-right: 28em;
 	}
-
-}
-
-
-
-/* Shift  transition 
-
-.ui-panel-positioning .ui-panel-content-wrap.panel-shift-left{
-	left:80%;
-}
-.ui-panel-positioning .ui-panel-content-wrap.panel-shift-right{
-	right:80%;
-}
-.ui-panel-transforms .ui-panel-content-wrap.panel-shift-left {
-	-webkit-transform: translateX(80%);
-	-moz-transform: translateX(80%);
-	-ms-transform: translateX(80%);
-	-o-transform: translateX(80%);
-	transform: translateX(80%);
-}
-.ui-panel-transforms .ui-panel-content-wrap.panel-shift-right {
-	-webkit-transform: translateX(-80%);
-	-moz-transform: translateX(-80%);
-	-ms-transform: translateX(-80%);
-	-o-transform: translateX(-80%);
-	transform: translateX(-80%);
-}
-
-/* Reveal transition 
-
-.ui-panel-transforms .ui-panel-position-left.ui-panel-display-reveal,
-.ui-panel-transforms .ui-panel-position-right.ui-panel-display-reveal {
-	-webkit-transform: translateX(0%);
-	-moz-transform: translateX(0%);
-	-ms-transform: translateX(0%);
-	-o-transform: translateX(0%);
-	transform: translateX(0%);
-}
-.ui-panel-position-left.ui-panel-display-reveal {
-	left: 0;
-}
-.ui-panel-position-right.ui-panel-display-reveal {
-	right: 0;
-}
-
-/* 
-
-.ui-panel-content-wrap {
-	position: relative;
-	background: inherit;
-}
-.ui-panel-positioning .ui-panel-content-wrap {
-	-webkit-transition: left 250ms ease, right 250ms ease;
-	-moz-transition: left 250ms ease, right 250ms ease;
-	-ms-transition: left 250ms ease, right 250ms ease;
-	-o-transition: left 250ms ease, right 250ms ease;
-	transition: left 250ms ease, right 250ms ease;
-}
-.ui-panel-transforms .ui-panel-content-wrap {
-	-webkit-transition: -webkit-transform 250ms ease;
-	-moz-transition: -moz-transform 250ms ease;
-	-ms-transition: -ms-transform 250ms ease;
-	-o-transition: -o-transform 250ms ease;
-	transition: transform 250ms ease;
-}
-
-
-.ui-panel-position-left.ui-panel-display-overlay {
-	-webkit-box-shadow: 5px 0px 25px 		rgba(0,0,0,.4);
-	-moz-box-shadow: 5px 0px 25px 			rgba(0,0,0,.4);
-	box-shadow: 5px 0px 25px 				rgba(0,0,0,.4);
-}
-.ui-panel-position-right.ui-panel-display-overlay {
-	-webkit-box-shadow: -5px 0px 25px 		rgba(0,0,0,.4);
-	-moz-box-shadow: -5px 0px 25px 			rgba(0,0,0,.4);
-	box-shadow: -5px 0px 25px 				rgba(0,0,0,.4);
+	.ui-panel-dismiss-open.push-left{
+		left: 28em;
+	}
+	.ui-panel-dismiss-open.push-right{
+		right: 28em;
+	}
 }
 
-*/
 
 
 .ui-page-active.ui-panel-body-scroll-block{

diff --git a/js/widgets/panel.js b/js/widgets/panel.js
@@ -17,7 +17,8 @@ $.widget( "mobile.panel", $.mobile.widget, {
 			modal: "ui-panel-dismiss",
 			modalOpen: "ui-panel-dismiss-open",
 			openComplete: "ui-panel-open-complete",
-			contentWrap: "ui-panel-content-wrap"
+			contentWrap: "ui-panel-content-wrap",
+			wrapOpenComplete: "ui-panel-content-wrap-open-complete"
 		},
 		theme: null,
 		position: "left",
@@ -148,13 +149,14 @@ $.widget( "mobile.panel", $.mobile.widget, {
 			o = self.options,
 			complete = function(){
 				self.element.addClass( o.classes.openComplete );
+				self._wrapper.addClass( o.classes.wrapOpenComplete );
 				self._trigger( "open" );
 			};
 
 
 		self._trigger( "beforeopen" );
 
-		if ( $.mobile.support.cssTransitions ) {
+		if ( $.support.cssTransitions ) {
 			self.element.one( self._transitionEndEvents , complete );
 		} else{
 			setTimeout( complete , 0 );
@@ -180,6 +182,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
 		self.element.removeClass( o.classes.panelOpen + " " + o.classes.openComplete );
 		self._modal.removeClass( o.classes.modalOpen );
 		self._wrapper.removeClass( o.display + "-" + o.position );
+		self._wrapper.removeClass( o.classes.wrapOpenComplete );
 
 		self._open = false;
 	},