jquery - 如何制作光滑的 block 状外观？

Question

CSS

.sidenavv {
display: none;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
-webkit-transition: 0.5s;
transition: width 0.5s;
padding-top: 60px;
text-align: center; }

.sidenavv.is-active{
  display:block!important;
  -webkit-transition: width 1s;
  -ms-transition: width 1s;
  -o-transition: width 1s;
  -moz-transition: width 1s;
  transition: width 1s;
}

JQuery

const $menu = $('#mySidenavv');

 $(document).mouseup(e => {
  if (!$menu.is(e.target) // if the target of the click isn't the container...
  && $menu.has(e.target).length === 0) // ... nor a descendant of the container
    {
         $menu.removeClass('is-active');
         $menu.removeClass('width');
    }
  });
    $('#burger-openn').on('click', () => {
        $menu.toggleClass('width');
        $('.width').css('width', '83%');
        $menu.toggleClass('is-active');
    });

HTML

    <div id="mySidenavv" class="sidenavv" style="width: 0px;">
         <nav id="site-navigation-mobile-blog">
            <ul>
            </ul>
         </nav><!-- #site-navigation -->
    </div>
    <span id="burger-openn" class="openn">☰</span>

目前，通过点击汉堡，这个 block 变成了一个显示 block ，宽度为 83%。我需要他顺利出现在这 83%，然后点击屏幕上的空白点 - 他也顺利关闭

Answer 1

你不能为 display:none 元素设置动画，因为元素不在 DOM 中

您可以使用下面的 transform:translate(x) 示例制作动画。

const $menu = $('#mySidenavv');

$(document).mouseup(e => {
  if (!$menu.is(e.target) // if the target of the click isn't the container...
      && $menu.has(e.target).length === 0) // ... nor a descendant of the container
  {
    $menu.removeClass('is-active');
  }
});
$('#burger-openn').on('click', () => {
  $menu.toggleClass('is-active');
});

.sidenavv {
  height: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  width: 83%;
  transform: translateX(-100%);
  -webkit-transition: transform 1s;
  -ms-transition: transform 1s;
  -o-transition: transform 1s;
  -moz-transition: transform 1s;
  transition: transform 1s;
  padding-top: 60px;
  text-align: center; }

.sidenavv.is-active{
  transform: translateX(0%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mySidenavv" class="sidenavv">
  <nav id="site-navigation-mobile-blog">
    <ul>
    </ul>
  </nav><!-- #site-navigation -->
</div>
<span id="burger-openn" class="openn">☰</span>