Question

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

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

我无法弄清楚为什么会这样。请有人帮助我。

Answer 1

我希望这有帮助

尝试使用以下代码..

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

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

1 个答案: