为什么使用Javascript来触发css转换只适用于删除类

我在JS Bin上粘贴了我的代码：https://jsbin.com/yamisuvute/edit?html，输出

如果单击绿色三角形，则不会触发过渡。但是，如果您再次单击它，您将看到转换工作正常。

我不明白为什么会发生这种事。请有人帮我。

我希望这能帮助

尝试使用以下代码。。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Intro</title>
  <style>
    *{padding:0;margin:0;box-sizing: border-box;}
    html,body{width:100%;height:100%;}
    .container{margin:auto;width:100%;height:100%;}
    .nav{
      position:fixed;
      left:0;
      top:0;
      display: block;
      background: skyblue;
      width: 40%;
      height: 100%;
      padding: 10px 0 10px 0;
      opacity: 1;
    }
    .nav-active{
        opacity: 1;
      transition: opacity 2s;
     -webkit-transition: opacity 2s;
    }
    .nav > ul{
      display: block;
      width: 100%;
    } 
    .nav > ul > li {
      display: block;
      width: 100%;
      height: auto; 
      list-style: none;
    }  
    .nav > ul > li > a{
      display: block;
      width: 100%;
      padding: 5px 5px;
      color: white;
      font-size: 25px;
      text-align: center;
      text-decoration: none;
    }
    .nav > ul > li > a:hover{
      background: gray;
      color: white;
    }
    .menu-btn{
      display:block;
      position:fixed;
      top:0; left: 40%;
      width:0;height:0;
      border-top: 20px solid transparent;
      border-right: 20px solid transparent;
      border-left: 20px solid green;
      border-bottom: 20px solid transparent;
    }
    .menu-btn-left{left:0;}
    .nav-hidden{left:-100000px;opacity:0;} 
  </style>
  <script>
    var notClicked = true;
    function popMenu(event){
      event.preventDefault();
      var nav = document.getElementsByClassName('nav')[0];
      var navHidden = document.getElementsByClassName('nav-hidden')[0];  
      var btn = document.getElementsByClassName('menu-btn')[0]; 
      if(notClicked){
        nav.classList.remove('nav-active');
        nav.classList.add('nav-hidden');
        btn.classList.add('menu-btn-left');
      }else{
        nav.classList.remove('nav-hidden');
        nav.classList.add('nav-active');
        btn.classList.remove('menu-btn-left');
      }
      notClicked = !notClicked;
    } 
  </script>
</head>
<body>
  <div class="container">
    <a href="" class="menu-btn" onclick="popMenu(event);"></a>
    <nav class="nav nav-active">
      <ul>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
      </ul>
    </nav>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  <script>
  </script>
</body>
</html>

相关内容

最新更新

热门标签：