css - 导航栏切换动画不起作用

Question

您好，我有这段代码可以在单击和取消单击时为切换设置动画。我已经完全按照它所说的复制了代码，但没有动画我做错了什么？我已经添加了 css 等。

它作为外部 php 文件加载，但代码是:

    <nav class = 'navbar navbar-default'>
<div class = 'navbar-header'>
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#example-navbar-collapse' aria-expanded='false' aria-controls='navbar'>
  <span class='sr-only'>Toggle navigation</span>
  <span class='icon-bar top-bar'></span>
  <span class='icon-bar middle-bar'></span>
  <span class='icon-bar bottom-bar'></span>
</button><a class = 'navbar-brand' href = '#'>SITENAME</a></div>
<div class = 'collapse navbar-collapse' id = 'example-navbar-collapse'>
    <ul class='nav navbar-nav navbar-nav'>
        <li class='non-active'><a href='#'>About</a></li>
    </ul>  
    <ul class='nav navbar-nav navbar-nav'>
        <li class='non-active'><a href='#'>Get bids</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
        <li class='non-active'><a href='#'>Register company</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
        <li class='non-active'><a href='#'>Help</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
        <li class='non-active'><a href='#'>Contact</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-right'>
        <li><a href='#'><span class='glyphicon glyphicon-user'></span> Login</a></li>
    </ul>
</div>
</nav>`

CSS 是:-

    .navbar-toggle {
  border: none;
  background: transparent !important;

  &:hover {
    background: transparent !important;
  }

  .icon-bar {
    width: 22px;
    transition: all 0.2s;
  }
  .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  .middle-bar {
    opacity: 0;
  }
  .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }
}

.navbar-toggle.collapsed {
  .top-bar {
    transform: rotate(0);
  }
  .middle-bar {
    opacity: 1;
  }
  .bottom-bar {
    transform: rotate(0);
  }
}

当然它很简单，我只是错过了一些愚蠢的东西!谢谢

Answer 1

您缺少 Javascript。 .collapsed 类的切换不能单独使用 HTML + CSS。