Instead toggling panel collapsed, switched to toggle panel open to fix...

Instead toggling panel collapsed, switched to toggle panel open to fix transition problem on mobile.

Instead toggling panel collapsed, switched to toggle panel open to fix...
Instead toggling panel collapsed, switched to toggle panel open to fix transition problem on mobile.
aa049338 · Yuin Chien · ff45f00b · aa049338 · aa049338 · aa049338
隐藏空白更改
内联并排

Showing with 27 addition and 24 deletion

docs/index.html docs/index.html +3 -3

examples/index.html examples/index.html +3 -3

files/main.css files/main.css +21 -18

未找到文件。
--- a/docs/index.html
+++ b/docs/index.html
@@ -10,7 +10,7 @@
 		<script src="../build/three.min.js" async defer></script>
 	</head>
 	<body>
-		<div id="panel" class="collapsed">
+		<div id="panel" class="">

 			<div id="header">
 				<h1><a href="http://threejs.org">three.js</a></h1>
@@ -107,14 +107,14 @@
 			expandButton.onclick = function ( event ) {

 				event.preventDefault();
-				panel.classList.toggle( 'collapsed' );
+				panel.classList.toggle( 'open' );

 			};

 			panelScrim.onclick = function ( event ) {

 				event.preventDefault();
-				panel.classList.toggle( 'collapsed' );
+				panel.classList.toggle( 'open' );

 			};


--- a/examples/index.html
+++ b/examples/index.html
@@ -31,7 +31,7 @@
 	</head>
 	<body>

-		<div id="panel" class="collapsed">
+		<div id="panel">

 			<div id="header">
 				<h1><a href="http://threejs.org">three.js</a></h1>
@@ -82,14 +82,14 @@
 		var expandButton = document.getElementById( 'expandButton' );
 		expandButton.addEventListener( 'click', function ( event ) {
 			event.preventDefault();
-			panel.classList.toggle( 'collapsed' );
+			panel.classList.toggle( 'open' );
 		} );

 		var panelScrim = document.getElementById( 'panelScrim' );
 		panelScrim.onclick = function ( event ) {

 			event.preventDefault();
-			panel.classList.toggle( 'collapsed' );
+			panel.classList.toggle( 'open' );

 		};


--- a/files/main.css
+++ b/files/main.css
@@ -209,46 +209,48 @@ iframe {
 	overflow: auto;
 }

+
 /* mobile */

 @media all and ( max-width: 640px ) {
-
+	#panel #expandButton {
+		display: block;
+	}
 	#panel {
 		position: absolute;
 		left: 0;
 		top: 0;
-		height: 100%;
 		width: 100%;
 		right: 0;
 		z-index: 100;
 		overflow-x: hidden;
 		transition: 0s 0s height;
 		border: none;
+		height: var(--header-height);
+		transition: 0s 0.2s height;
 	}
+	#panel.open {
+		height: 100%;
+		transition: 0s 0s height;
+	}
+
 	#panelScrim {
-		background: black;
+		pointer-events: none;
+		background-color: rgba(0,0,0,0);
 		position: absolute;
 		left: 0;
 		right: 0;
 		top: 0;
 		bottom: 0;
 		z-index: 1000;
-		opacity: .6;
-		pointer-events: auto;
-		transition: .2s opacity;
-	}
-	#panel.collapsed {
-		height: var(--header-height);
-		transition: 0s .2s height;
-	}
-	#panel.collapsed #panelScrim {
-		opacity: 0;
 		pointer-events: none;
+		transition: .2s background-color;
 	}
-
-	#panel #expandButton {
-		display: block;
+	#panel.open #panelScrim {
+		pointer-events: auto;
+		background-color: rgba(0,0,0,0.6);
 	}
+
 	#contentWrapper {
 		position: absolute;
 		right: 0;
@@ -260,9 +262,10 @@ iframe {
 		z-index: 10000;
 		transition: .25s transform;
 		overflow-x: hidden;
+		margin-right: -320px;
 	}
-	#panel.collapsed #contentWrapper {
-		transform: translate3d(120%,0,0);
+	#panel.open #contentWrapper {
+		transform: translate3d(-320px, 0 ,0);
 	}

 	iframe {