汉堡包图标不会旋转

Question

汉堡图标正确显示（折叠），但点击时不会显示动画。运行时，它以折叠按钮开始。点击后会出现下拉菜单。但是，该按钮不具有动画效果。

HTML：

/* --------------------------------------
   Dropdown
   -------------------------------------- */

.dropdown-menu {
  background-color: transparent;
  margin-left: -90%;
}

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

.navbar-toggle:hover {
  background: transparent !important;
}

.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}

.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggle .middle-bar {
  opacity: 0;
}

.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

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

.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}

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

<!--Navbar Button--->
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" 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>

<!--Navbar Button--Menu-->
<div class="container">
  <div class="collapse navbar-collapse navHeaderCollapse navbar-responsive-collapse">

    <ul class="nav navbar-nav nav-right">
      <li class="active" id="home"><a href="index.html">HOME</a></li>
      <li><a href="watch.html">WATCH</a></li>
      <li><a href="give.html">GIVE</a></li>
      <li class="dropdown">

        <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span>  LOGIN</a></li>
          <li><a href="join.html"><span class="glyphicon glyphicon-phone"></span>  JOIN</a></li>
          <li><a href="connect.html"><span class="glyphicon glyphicon-link"></span> CONNECT</a></li>
          <li><a href="prayer.html"><span class="glyphicon glyphicon-heart-empty"></span> PRAYER</a></li>
          <li><a href="pastor.html"><span class="glyphicon glyphicon-user"></span>  PASTOR</a></li>
          <li><a href="contactus.html"><span class="glyphicon glyphicon-send"></span> CONTACT US</a></li>
        </ul>
      </li>
    </ul>
  </div>