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

JAVASCRIPT - Animate block to disappear like it does when it appear

本文关键字：一样 动画 消失 JAVASCRIPT-      更新时间：2024-03-17

我需要一些帮助来进行侧边导航，当我点击按钮时，侧边导航看起来很好，但当我试图重新制作相同的代码以使其消失时，它只会在一秒钟内消失，而不是像出现时那样慢慢消失在屏幕左侧。。。这里有人可以帮我编写关闭函数的脚本吗？

<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>

这里最简单的解决方案是使用CSS转换，而不是CSS动画。顾名思义，转换描述了如何从状态A（隐藏）过渡到状态B（可见），动画只是为了显示动画，而不是为了切换状态。

我还更改了一些HTML，因为在href中放入javascript:void（0）是错误的。请参阅我几天前制作的这个代码笔，了解替代方案。

onclick属性也是个坏主意，这就是我在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>

相关文章：