简单的侧边栏菜单转换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