Question

与这些家伙一起努力，任何帮助都将不胜感激！

尝试动画_S主题移动菜单的转换动画。

由于使用vanilla JS动态生成内容，因此无法真正创建JSFiddle。

这似乎是切换移动课程的核心JS＆＃39; .toggled＆＃39;点击移动菜单图标：

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关键帧，这显然只是在进入时动画，在第二次点击时删除该类并恢复为简单。隐藏在此屏幕大小的主导航。

理想情况下，想通过类似于.slideToggle或.fadeToggle的东西来通过JS / JQUERY制作动画，但正如我所说努力使其发挥作用。

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

非常感谢提前！

Answer 1

我遇到了同样的问题，它让我坚持了三天。我最终使用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;
}

希望这有帮助！

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

1 个答案: