jquery - 切换jquery的过渡效果

Question

我正在尝试使用 jquery 切换创建一个隐藏菜单。 我有一个带有单击事件的按钮和一个带有切换事件的类菜单。 我想在菜单上进行 CSS 过渡，或者显示效果。

我有一个侧边栏，我希望菜单从左到右显示，并带有过渡效果或其他效果。

$('.menu__btn').click(function(){
  $('.menu').toggle();
})

.menu {
  background: #000;
  width: 240px;
  height: 100%;
  position:fixed;
  margin-left: 100px;
  display: none
  -webkit-box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
  -moz-box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
  box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
}

.menu__container {
  padding: 85px 10px 10px 10px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu__btn">
  <button class="menu__icon">Button</button>
</div>
<div class="menu">
  <div class="menu__container">
    Some content
  </div>
</div>

提前致谢

Answer 1

如果我理解正确的话，您希望从左到右为菜单设置动画。

您可以在菜单上切换类并添加一些过渡和样式。 toggle() 从 display:none 更改为 display:block，这是一个不可动画的属性。

使用toggleClass()来...好吧...切换:)/更改菜单上的类并设置这些类的样式。

因此，请使用 left:-100% 和 left:200px (如果这是您想要放置菜单的位置)并结合过渡或不透明度。

见下文

$('.menu__btn').click(function(){
  $('.menu').toggleClass('show-menu');
})

.menu{
  background: #000;
  width: 240px;
  height: 100%;
  position:fixed;
  left:-100%;
 
  -webkit-box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
  -moz-box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
  box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
  transition:1s ease-out;
  opacity:0;
}
.menu__container {
  padding: 85px 10px 10px 10px;
  position: relative;
  }
  .show-menu {
     left:200px;
     opacity:1;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu__btn">
 <button class="menu__icon">Button</button>
</div>
<div class="menu">
   <div class="menu__container">
    Some content
   </div>
 </div>