引导菜单动画'x‘不要切换到重置

Question

我有一个简单的问题要解决，一直试图解决它连续两天，寻找答案没有运气。

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

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

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

我不知道问题出在哪里，所以我没有在这里粘贴任何代码。

Answer 1

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

编辑:我认为这部分使它不再回到正常状态：

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

并将animation.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