切换时的过渡效果 jquery

Question

我正在尝试使用 jquery 开关制作一个隐藏菜单。我有一个带有点击事件的按钮和一个带有切换事件的 class 菜单。我想在菜单上做一个 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

如果我没理解错的话，您想从左到右设置菜单动画。

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

使用 toggleClass() 来...嗯...切换 :)/更改 menu 上的 classes 并设置 classes 的样式。

因此请使用 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>

切换时的过渡效果 jquery

Transition effect on toggle jquery

css

jquery

transition