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

简单的侧边栏菜单转换probs

1 个答案: