css动画之移动端菜单切入动画效果菜单动画

最近想着优化网站的移动端效果，由于传统框架没有好的移动端菜单弹出效果，只有自己动手写了，下面分享一下demo。在线体验地址：

https://micuu.com/html/m-nav2.html 单独将动画提出，不需要引用css动画文件

https://micuu.com/html/m-nav3.html 推荐使用,实现最为简洁

预览图效果：

借助了jquery和Animate.css

具体的Animate.css使用方法可以参考：https://micuu.com/new/485.html

下面不多说直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端菜单滑出滑入效果</title>
</head>
<style>
  body{
    padding:0;
    margin:0;
  }
  .mask{
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #0a0a0a;
    opacity: 0.3;
    z-index: 1;
  }
  .m-nav{
    display: block;
    position: fixed;
    background: pink;
    height:100vh;
    width:50%;
    z-index: 2;
  }
  #btn{
    position:absolute;
    top: 0;
    right: 0;
  }
  .none{
    display: none;
  }
</style>
<link rel="stylesheet" href="https://micuu.com/static/index/css/animate.css">
<body>
  <!--菜单div-->
  <div class="m-nav none animated" style="animation-duration: 400ms">
  </div>
  <div class="mask none" onclick="toggleMnav()">
  </div>
  <!--测试内容，可删-->
  <div class="content">
    最近想着优化网站的移动端效果，由于传统框架没有好的移动端菜单弹出效果，只有自己动手写了，下面分享一下demo。在线体验地址：
    https://cdn.micuer.com/html/m-nav.html
    预览图效果：
    借助了jquery和Animate.css
    具体的Animate.css吃用方法可以参考：https://cdn.micuer.com/new/485.html
    下面不多说直接上代码：
  </div>
  <button id="btn" onclick="toggleMnav()">切换</button>
  <script src="https://cdn.micuer.com/static/js/jquery.min.js"></script>
  <script>
    /**
     * 控制菜单显隐
     */
    function toggleMnav(){
      $(".m-nav").removeClass('none')
      if( $(".m-nav").hasClass('fadeInLeft')){
        $(".m-nav").removeClass('fadeInLeft')
        $(".m-nav").addClass('fadeOutLeft')
        $(".mask").addClass('none')
      }else{
        $(".m-nav").removeClass('fadeOutLeft')
        $(".mask").removeClass('none')
        $(".m-nav").addClass('fadeInLeft')
      }
    }
  </script>
</body>
</html>

css动画之移动端菜单切入动画效果菜单动画

留言反馈