在菜单切换上添加平滑过渡效果（二十十四个 WordPress 主题）

Question

我正在使用 WordPress 二十十四主题。每当将浏览器的大小调整为移动视图时，菜单就会自动向上切换。所以你必须点击切换菜单，菜单应该向下滑动。

我想在单击菜单切换时平滑地向下滑动过渡到菜单。默认情况下，主题没有任何过渡效果。我插入了一些过渡效果，但它不起作用。我可以仅通过 CSS 来完成吗？如果是如何？

我需要和 jQuery 一起解决这个问题吗？

我插入的一些代码转换，只有 padding ease 起作用，我想要在向下或向上滑动时的总 ease 效果。

.primary-navigation {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    font-size: 14px;
    padding-top: 24px;
    transition: all 500ms ease-in-out;
}


.primary-navigation.toggled-on {
    padding: 72px 0 36px;
    transition: all 500ms ease-in-out;

}

Answer 1

我建议使用 jQuery，因为您已经在使用 functions.js

我相信你想应用与 jquery slideToggle 相同的效果。

这是一个很好的例子：jsfiddle

您可以click here了解更多关于slideToggle的信息。

您可以在 functions.js:

中替换您添加到以下代码中的切换 JS

jQuery(document).ready(function($){
    $('.menu-toggle').click(function(){
        $('.menu-main-menu-container').slideToggle('slow');
    });
 });

您还可以删除 CSS 上的 transition: all 500ms ease-in-out;。

希望对您有所帮助。

在菜单切换上添加平滑过渡效果（二十十四个 WordPress 主题）

Add smooth transition effect on menu toggle (Twenty Fourteen WordPress Theme)

wordpress

transition

menu

toggle

slide