jquery - 对切​​换jQuery的过渡效果

我正在尝试使用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>

提前致谢

最佳答案

如果我正确理解您的内容，那么您想从左到右制作菜单动画。

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

使用toggleClass()来...切换...上的类：）/更改menu上的类并为这些类设置样式。

因此，请使用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 - 对切​​换jQuery的过渡效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50874992/