Question

我想在小屏幕尺寸上切换导航栏按钮时添加动画。这就是我尝试与.navbar-toggle.larr in this template相同的原因。

/* ANIMATED LEFT ARROW */
.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(1) {
    transform: translate3d(0,0,0) rotate(0deg);
    width: 22px;
}

.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(2) {
    transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(3) {
    transform: translate3d(0,0,0) rotate(0deg);
    width: 22px;
}

.navbar-toggle.larr .icon-bar:nth-of-type(1) {
    transform: translate3d(0px,6px,0) rotate(45deg);
    transform-origin: left top;
    width: 11px;
}

.navbar-toggle.larr .icon-bar:nth-of-type(3) {
    transform: translate3d(0px,-6px,0) rotate(-45deg);
    transform-origin: left bottom;
    width: 11px;
}
/* END ANIMATED LEFT ARROW */

当菜单打开时，此css块会将菜单按钮从3行更改为左箭头，反之亦然。我有自己的主菜单和侧容器设计，我不想使用示例中实现的那个。但不幸的是，当我运行我的项目时，没有发生任那么我怎样才能让它发挥作用with my demo？

更新

如果我从演示中的按钮中删除折叠的类，则菜单按钮将采用左箭头的设计...

导航栏菜单按钮动画无法正常工作

0 个答案: