Animate bootstrap汉堡菜单交叉

Question

我试图在引导程序菜单上设置汉堡图标的动画，以便在显示菜单时成为十字架。

菜单显示后它正常工作，但最初不应显示十字架。有谁知道我怎么能让它显示汉堡菜单而不是最初的十字架？

CSS将其从汉堡变为十字架。

.navbar-toggle {
    border: none;
    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);
}