前言

原本是想先记录在有道云笔记的，但是里头没有标题之类的，写完之后量太大了找起来就会特别费劲，所以还是直接记录在这边好了

给菜单添加过渡效果

这里对应了三个文件，分别是：

header.php

路径

/wp-content/themes/Sakura/js/sakura-app.js

/* 增加class - menu-transition-start */
<nav class="navbar menu-transition-start">

sakura-app.js

路径

/wp-content/themes/Sakura/js/sakura-app.js

NH: function () {
            var h1 = 0;
            $(window).scroll(function () {
                var s = $(document).scrollTop(),
                    cached = $('.site-header'),
                    menu = $('.navbar');
                if (s == h1) {
                    cached.removeClass('yya');
                    // 滚动条在顶部时清除class
                    menu.removeClass('menu-transition');
                }
                if (s > h1) {
                    cached.addClass('yya');
                    // DIY菜单样式，我这边是从左往右，由隐藏到显示的一个过渡效果
                    menu.addClass('menu-transition');
                }
            });
},

style.css

路径

/wp-content/themes/Sakura/style.css

/* 顶部菜单过渡动画 start */
.site-header:hover .navbar{
    transform: translateX(0) !important;
    opacity: 1 !important;
}

.menu-transition-start {
    transform: translateX(5%);
    opacity: 0;
    transition: all .5s;
}
.menu-transition {
    transform: translateX(0);
    opacity: 1;
    transition: all .5s;
}
/* 顶部菜单过渡动画 end */

Ex - ploooosion！