Javascript JS/CSS-移动菜单切换动画

与这些家伙斗争，任何帮助都将不胜感激

尝试设置主题移动菜单的输入/输出转换动画

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

这似乎是切换移动类的核心JS。单击移动菜单图标即可切换：

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

到目前为止，我唯一能够制作动画的方法是在.main-navigation.toggled类上使用css关键帧，该类显然只在进入时制作动画，在第二次单击时该类将被删除，并恢复为简单的.main-navigation，该类在该屏幕大小下隐藏

理想情况下，我们希望通过JS/JQUERY使用类似于.slideToggle或.fadeToggle的东西来制作动画，但正如我所说，我们正在努力实现这一点

对于其他使用该主题的编码人员来说应该很有用，因为这是为了在最新版本中定制.main-navigation.js

---

非常感谢

我也面临着同样的问题，这让我三天都发疯了。最后，我得到了菜单“动画”使用

我没有改变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;
}

---

希望这有帮助

感谢您的建议，不幸的是，您已经尝试将转换属性应用于这两个元素，但没有成功！问题是，当第二次切换菜单时，它只是删除类。切换后，将转换应用到。主导航ul不会为“外出”动画设置“移动”菜单的动画。似乎Jquery需要在上面的代码中添加一个.slideToggle或.fadeToggle，但在某些地方它无法工作！