更简洁基于Gsap的手机导航

现在GSAP这个超强动画库已经全面免费了，我们还是尽可能多用起来，毕竟功能强大，兼容性好，速度快。

现在我们用gsap实现一个手机导航，比较常用的。

HTML：

<!-- 手机导航 -->
    <div class="nav_m uk-hidden@m">
       <div class="nav_m_btn">
           <i class="nav_m_btn_line01"></i>
           <i class="nav_m_btn_line02"></i>
           <i class="nav_m_btn_line03"></i>
       </div>
    </div>
<div class="nav_m_list uk-hidden@m">
  <ul>
     <li><a href="">首页</a></li>
     <li><a href="">关于我们</a></li>
     <li><a href="">公司动态</a></li>
     <li><a href="">加入我们</a></li>
     <li><a href="">联系我们</a></li>
  </ul>
</div>

CSS:

/** nav for mobile **/
.nav_m_btn{
    i{
        display: flex;
        flex-direction: column;
        width: 3rem;
        height: 0.2rem;
        background-color: #000;
        &:not(:first-child){
            margin-top: 0.6rem;
        }
    }
}
.nav_m_list{
    position: absolute;
    left: 0;
    right: 0;
    top: 6.7rem;
    width: 100vw;
    background-color: rgba(255,255,255,1);
    z-index:100;
    height: auto;
    opacity: 0;
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        opacity: 0;
        border-bottom: #ddd 1px solid;
        text-align: center;
    }
    a{
        font-size: 2rem;
        color: #000;
        display: block;
        padding: 2rem 4rem;
        &:hover{
            text-decoration: none;
            color: #333;
        }
    }
}

JS:

//手机菜单效果 获取各元素
const humg = document.querySelector('.nav_m_btn');
const humg01 = document.querySelector('.nav_m_btn_line01');
const humg02 = document.querySelector('.nav_m_btn_line02');
const humg03 = document.querySelector('.nav_m_btn_line03');
const nav_m_list = document.querySelector('.nav_m_list');
const nav_m_list_li = nav_m_list.querySelectorAll('li');

//创建动画时间线
const ToggleMenuLine = gsap.timeline({ paused: true, reversed: true })
    .to(humg02,{ duration: 0.1, opacity: 0, x: '20'},'<')
    .to(humg03,{ duration: 0.2, rotation: -45})
    .to(humg01,{ duration: 0.1, rotation: 45}, '<')
    .to(humg01, { duration: 0.125, transformOrigin: '50% 50%', y: 8},'<')
    .to(humg03, { duration: 0.125, transformOrigin: '50% 50%', y: -8},'<');
const MenuListLine = gsap.timeline({paused: true, reversed: true})
    .to(nav_m_list,{duration: 0.5, opacity: 1})
    .to(nav_m_list_li,{ duration: 0.2, stagger: 0.05, opacity: 1, y: 0});

//点击切换效果
humg.addEventListener('click', () => {
    if (ToggleMenuLine.reversed()) {
        ToggleMenuLine.play();
        MenuListLine.play();
    }else{
        ToggleMenuLine.reverse();
        MenuListLine.reverse();
    }
});

结束，代码量少了不少，主要可以完全自定义修改。