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

Question

我正在使用WordPress twenty teen主题。每当将浏览器大小调整为移动视图时，菜单都会自动切换。因此，您必须单击切换菜单，菜单应向下滑动。

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

我需要使用 jQuery 来解决这个问题吗？

我正在使用这个网站 http://ash-malon.info/

我插入的一些代码过渡，只有填充缓和起作用，我希望在它向下或向上滑动时获得完全的缓和效果。

.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，因为你已经在使用函数了.js

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

这里有一个很好的例子：jsfiddle

您可以单击此处了解有关幻灯片切换的更多信息。

您可以在函数中替换添加到以下代码中的切换 JS.js：

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

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

我希望这会有所帮助。