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。顾名思义，转换描述了如何从状态A（隐藏）传递到状态B（可见），动画只是显示动画而不是切换状态。

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

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

＆＃13;

(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()
  })

})()

＆＃13;

/**
 *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;
}

＆＃13;

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

＆＃13;

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

1 个答案: