如何插入转换延迟

Question

我使用一个简单的JavaScript关闭和打开菜单，但我想知道如何在打开菜单时插入延迟。

 <a href="#1" onclick="return show();">open Menu</a>
 <a href="#1" onclick="return hide();">Hide Menu</a>

   <div id="container">
     <div id="side-menu" style="display:none">Left menu</div>
     <div id="body">body</div>
   </div>

CSS

 #container{ position: absolute;display: table}
 #side-menu, #body {display:table-cell;}
 #body {width: 80%;}
 #side-menu {width: 260px;}

JavaScript：

 <script> 
    function show() { 
     if(document.getElementById('side-menu').style.display=='none') { 
        document.getElementById('side-menu').style.display='block';            

     } 
      return false;
     } 
      function hide() { 
        if(document.getElementById('side-menu').style.display=='block') { 
        document.getElementById('side-menu').style.display='none'; 
     } 
        return false;
     }   
</script>

当您单击“打开”菜单时，它将打开侧栏菜单，并将身体推到右侧。我的问题是如何让它以延迟的方式把身体推到右边，或者说是关于.8s的过渡。

JavaScript有办法处理这件事吗？

Answer 1

使用jquery

$("#side-menu").hide(800)

您还可以添加不同类型的动画

更新您的javascript代码：

function showHide() { 
  if($("#side-menu").is(":visible") { 
      $("#side-menu").hide(800);         
  } else {
      $("#side-menu").show(800);
  }
}

Answer 2

我更喜欢一个完整的CSS解决方案：

#side-menu {
    left: -260px;
    width: 260px;
    position: absolute;
    transition-property: left;
    transition-delay: 0.5s;
    transition-duration: 0.8s;
}
#side-menu.open {
    left: 0;
}

(请注意，我在这里很懒，并且绝对地定位了元素，这会让它滑到身体上。)这是因为使用left演示转换是最简单的；您可以使用width代替定位元素。)

Answer 3

这没有jQuery，也没有滑动：

你的纽扣：

 <a href="#1" onclick="show();">open Menu</a>
 <a href="#1" onclick="hide();">Hide Menu</a>

你的套路：

function show() {
  setTimeout( function() {document.getElementById('side-menu').style.display='block'; }, 800);            
} 
function hide() { 
  setTimeout( function() {document.getElementById('side-menu').style.display='none'; }, 800);
}