代码之家 › 专栏 › 技术社区 › Johan

引导菜单动画“x”不切换到重置

togglebutton animation twitter-bootstrap html jquery

Johan · 技术社区 · 9 年前

我有一个简单的问题要解决,我已经连续两天试图解决它,但没有找到答案。

问题是导航栏切换按钮(手机大小窗口中的引导菜单按钮) 单击按钮时的动画工作正常,但当我尝试在打开时用导航栏切换(x)按钮关闭菜单时,按钮中的(x)不会重置为css文件中的旋转(0)。

工作引导菜单动画按钮示例 http://iwebdesign.se/bare/

我的问题按钮 http://iwebdesign.se/

我不知道问题可能在哪里,因此我没有在这里粘贴任何代码。

1 回复 | 直到 9 年前

DaMaGeX 9 年前

这是因为按钮仍然是焦点元素。

编辑: 我认为这一部分使它无法恢复正常:

header .navbar-iwebdesign .navbar-toggle:focus .top-bar
    {
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 15% 85%; /* chrome */
    -webkit-transition: all 0.35s ease-in-out;
    }
header .navbar-iwebdesign .navbar-toggle:focus .middle-bar-transition-new
    {
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 10.5px -1.5px; /* chrome */
    -webkit-transition: all 0.25s ease-in-out;
    opacity: 0.5;
    }

header .navbar-iwebdesign .navbar-toggle:focus .bottom-bar
    {
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 11% 10%; /* chrome */
    -webkit-transition: all 0.35s ease-in-out;
    }

如果我是你,我会使用jQuery来切换类。

编辑: 只需将其添加到menu.js中:

$('.navbar-toggle').on('click', function() { 
    $(this).toggleClass('collapsed');
});

并在动画中更改上述选择器。css发送至:

header .navbar-iwebdesign .navbar-toggle.collapsed .top-bar
header .navbar-iwebdesign .navbar-toggle.collapsed .middle-bar-transition-new
header .navbar-iwebdesign .navbar-toggle.collapsed .bottom-bar

推荐文章

Ahmed Zaidan · 快速ui转换无法按预期工作

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Armand · 为什么我的图像与另一个图像相交时不会被删除

1 年前

Frakcool · 满足条件时,SwiftUI动画背景颜色更改

2 年前

Ancross · 为什么我的小CSS动画不会触发?

2 年前

C.Bernabei · 灯丝动画混合

2 年前

Tom · 移动球体动画

2 年前

Tom · 设置两个圆的动画

2 年前

Neo78 · CSS动画将返回其原始位置,但不应该

2 年前

Wikson · 我想在滚动时启动JS函数

2 年前