JS/CSS - 动画手机菜单切换

与这个家伙奋斗，任何帮助将不胜感激！JS/CSS - 动画手机菜单切换

试图对_S主题的移动菜单进/出转换进行动画处理。

由于内容是使用vanilla JS动态生成的，因此无法真正制作JSFiddle。

这似乎是核心JS用于切换移动类的.toggled“在移动菜单图标点击：

button.onclick = function() { 
    if (-1 !== container.className.indexOf('toggled')) { 
     container.className = container.className.replace(' toggled', ''); 
     button.setAttribute('aria-expanded', 'false'); 
     menu.setAttribute('aria-expanded', 'false'); 

    } else { 
     container.className += ' toggled'; 
     button.setAttribute('aria-expanded', 'true'); 
     menu.setAttribute('aria-expanded', 'true'); 
    } 
};

我已经设法到目前为止动画的唯一方式是使用CSS关键帧在.main-navigation.toggled类中显然只有在动画中，该类在第二次点击时被移除并恢复为仅隐藏在此屏幕尺寸的.main-navigation。

理想情况下想要通过JS/JQUERY使用类似于.slideToggle或.fadeToggle的动画，但正如我所说的努力使这项工作。

对于其他使用_S主题的编码器应该很有用，因为它试图在最新版本中自定义.main-navigation.js。

很多预先感谢！

来源

2017-06-19 EasterMedia

我面临同样的问题，它让我疯狂了三天。我最终使用CSS3 Transition获得了“动画”菜单。

我没有改变navigation.js文件中的任何东西（尝试了很多不同的东西，没有任何工作，只是破坏了东西）。

我改变了style.css的两件事情，并添加转场：

.main-navigation ul { 
    display: block; 
    list-style: none; 
    position: absolute; 
    left: -250px; 
    transition: left 1s ease-in-out; 
} 

/* Small menu. */ 
.menu-toggle, 
.main-navigation.toggled ul { 
    left: 0; 
    transition: left 1s ease-in-out; 
}

希望这有助于！

来源

2017-08-04 01:24:10 Nicole

感谢您的建议，不幸的是已经尝试将转换属性应用于这两个元素，但没有运气！问题是，当菜单第二次切换时，它会简单地删除类.toggled，以便将过渡应用到.main-navigation ul不会为'出'动画设置'移动'菜单的动画。似乎需要Jquery才能在上面的代码中添加.slideToggle或.fadeToggle，但却无法使其工作！ – EasterMedia

JS/CSS - 动画手机菜单切换

回答

相关问题