JAVASCRIPT - 动画 block 消失时就像它出现时一样

Question

我的侧边导航需要一些帮助，当我单击一个按钮时它看起来非常好，但是当我尝试重新制作相同的代码只是为了让它消失时它只是在一秒钟内消失而不是慢慢消失在左侧屏幕就像它出现时一样......这里的任何人都可以帮助我编写关闭功能的脚本来执行此操作吗？

<nav class="w3-sidenav w3-dark-grey w3-card-2 w3-animate-left"    style="display:none;z-index:2">
      <a href="javascript:void(0)" 
      onclick="w3_close()"
      class="w3-closenav w3-jumbo w3-text-teal">&times;</a>
      <a href="javascript:void(0)">Link 1</a>       
      <a href="javascript:void(0)">Link 2</a>       
      <a href="javascript:void(0)">Link 3</a>       
      <a href="javascript:void(0)">Link 4</a>       
      <a href="javascript:void(0)">Link 5</a>       
    </nav>

.w3-animate-left{
position:relative;-webkit-animation-name:animateleft;-webkit-animation-duration:0.6s;animation-name:animateleft;animation-duration:0.6s}
@-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}

    <script>
function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.width = "300px";
    document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center";
    document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "40px";
    document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "10%";
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.width = "0px";
    document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center";
    document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "40px";
    document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "0%";
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";    
}
</script>

Answer 1

此处最简单的解决方案是使用 CSS transitions而不是 CSS animations .顾名思义，transition 描述的是如何从状态 A(隐藏)过渡到状态 B(可见)，动画只是展示动画而不是切换状态。

我也改变了一点你的 HTML 因为把 javascript:void(0) in the href is wrong .参见 this codepen几天前我提出了替代解决方案。

onclick attribute is also a bad idea ，这就是我在 JS 中添加事件监听器的原因。

(function(){
  "use strict";

  var nav = document.querySelector('.w3-sidenav');
  function toggleNav(){
    if(nav.className.indexOf('hidden') > -1){
      nav.className = nav.className.replace(' hidden', '');
    }
    else {
      nav.className += ' hidden'
    }
  }


  document
  .querySelector('.w3-closenav')
  .addEventListener("click", function(e){
    e.preventDefault();
    toggleNav()
  })

  document
  .querySelector('.toggleNav')
  .addEventListener("click", function(e){
    e.preventDefault();
    toggleNav()
  })

})()

/**
 *The visible state
 */
.w3-animate-left {
  position: relative;

  left: 0;
  opacity: 1;

  transition-property: left, opacity;
  transition-duration: 0.6s;
}

/**
 * The hiden state
 */
.w3-animate-left.hidden{
  left: -300px;
  opacity: 0;
}

<!-- I added a link to toggle the navigation -->
<a href="#!" class="toggleNav">Toggle Navigation</a>
<nav class="w3-sidenav w3-dark-grey w3-card-2 w3-animate-left hidden" style="z-index:2">
    <a href="#!" class="w3-closenav w3-jumbo w3-text-teal">&times;</a>
    <a href="#!">Link 1</a>
    <a href="#!">Link 2</a>
    <a href="#!">Link 3</a>
    <a href="#!">Link 4</a>
    <a href="#!">Link 5</a>
</nav>