簡單的側邊欄菜單轉換probs

Question

我有一個簡單的側邊欄菜單，我想應用雙向過渡但只有一個方向正在工作。

HTML：

<div class="content"><button id="menu-open">open</button></div> 
<nav class="menu">....</nav> 

CSS：

.menu{ 
    width:300px; 
    height:100%; 
    position:fixed; 
    left:-300px; 
    top:0; 
} 

.menu-open{ 
-webkit-transform: translate3d(300px, 0, 0); 
-moz-transform: translate3d(300px, 0, 0); 
-ms-transform: translate3d(300px, 0, 0); 
-o-transform: translate3d(300px, 0, 0); 
transform: translate3d(300px, 0, 0); 
-webkit-transition: -webkit-transform 0.4s ease; 
-moz-transition: -moz-transform 0.4s ease; 
-ms-transition: -ms-transform 0.4s ease; 
-o-transition: -o-transform 0.4s ease; 
transition: transform 0.4s ease; 
} 

JQuery的：

$('#menu-open').click(function(){ 
$('.menu').toggleClass('menu-open'); 
$('.content').toggleClass('menu-open'); 
}) 

Answer 1

給過渡到.content和.menu教室將給你反向過渡。

由於toggleClass將從這兩個類中移除menu-open類，所以過渡效果將不起作用。

.menu{ 
    width:300px; 
    height:100%; 
    position:fixed; 
    left:-300px; 
    top:0; 

    -webkit-transition: -webkit-transform 0.4s ease; 
    -moz-transition: -moz-transform 0.4s ease; 
    -ms-transition: -ms-transform 0.4s ease; 
    -o-transition: -o-transform 0.4s ease; 
    transition: transform 0.4s ease; 
    } 

.content{ 
    -webkit-transition: -webkit-transform 0.4s ease; 
    -moz-transition: -moz-transform 0.4s ease; 
    -ms-transition: -ms-transform 0.4s ease; 
    -o-transition: -o-transform 0.4s ease; 
    transition: transform 0.4s ease; 
    } 

並刪除從.menu-open轉換。

Working Fiddle