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

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

Answer 1

你错过了Javascript。仅使用HTML + CSS就不会发生.collapsed类的切换。

导航栏切换动画无法正常工作

1 个答案: