移动端官网折叠导航效果实现（三条横线变❌）

前几天，和同事写了个官网，官网大家都知道的，简单嘛，不过麻烦的就是移动端的适配问题，我负责的是移动端H5版的。
有个折叠导航的动效，参考的 这个网站的效果 https://mdnf.qq.com/cp/a20191217yyzm/index.shtml?order_mdnf=1&adtag=gw

写出的山寨版效果图

GIF图录制的不太好，倍速貌似没调好，凑合看。通过效果图，可以看出来，我只是山寨了一下三条横线的动效，不过从上至下渐入的效果也就没什么难度了。思路大概就是，第二条线消失，第一条线往左下角45度，第三条线向左上角45度，用到的都是css3的属性，没什么难度。话不多说，上代码。

html

<template>
	 <div class="home">
		 <header>
	      <img class="logo" src="@/assets/logo.png" alt />
	      <div class="btn-con" @click="open">
	        <i :class="[draw,{ closeDown: openflag } ]"></i>
	        <i :class="[ draw,{ miss: openflag }]"></i>
	        <i :class="[ draw,{ closeTop: openflag }]"></i>
	      </div>
	    </header>
	     <ul class="nav" v-if="openflag">
	      <a href="#home" @click="open">
	        <li><span>Home</span><span>首页</span></li>
	      </a>
	      <a href="#about" @click="open">
	        <li><span>About</span><span>关于我们</span></li>
	      </a>
	      <a href="#product" @click="open"> 
	       <li><span>Product</span><span>产品介绍</span></li>
	      </a>
	      <a href="#target" @click="open">
	       <li><span>Target</span><span>目标用户</span></li>
	      </a>
	      <a href="#service" @click="open">
	         <li><span>Service</span><span>服务渠道</span></li>
	      </a>
	      <a href="#download" @click="open">
	        <li><span>Download</span><span>下载App</span></li>
	      </a>
	    </ul>
    </div>
</template>

js

<script>
export default {
  name: "home",
  data() {
    return {
      openflag: false,
      };
  },

  methods: {
    open() {
      this.openflag = !this.openflag;
    }
  }
};
</script>

css

<style lang="less">
body,* {
  margin: 0;
  padding: 0;
}
ul,li{
  list-style: none;
}
a{
  color:#666666;
  text-decoration: none;
  font-size: 16px;
}

header {
  width: 100%;
  box-sizing: border-box;
  height: 60px;
  padding: 0 10px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}
.btn-con {
  position: relative;
}
.btn-con i.draw {
  display: block;
  width: 30px;
  height: 2px;
  background: #fff;
  transition: 0.3s;
}
.btn-con i.draw:first-of-type,
.btn-con i.draw:last-of-type {
  display: block;
  width: 30px;
  height: 2px;
  background: #fff;
  position: absolute;
  display: block;
  outline: none;
  top: -10px;
  transition: 0.3s;
}
.btn-con i.draw:last-of-type {
  top: 10px;
}

.btn-con .draw.miss {
  background: transparent;
}
.btn-con i.draw.closeDown {
  top: 0;
  transform: rotate(-45deg);
}
.btn-con i.draw.closeTop {
  top: 0;
  transform: rotate(45deg);
}
.nav{
  width:100%;
  height:100%;
  padding: 70px 20px 20px 20px;
  box-sizing: border-box;
   background: rgba(0, 0, 0, 0.8);
   position: fixed;
   top:0px;
   left:0;
   z-index: 9999;
}
.nav a{
  color: #a8a8ab;
  text-decoration: none;
  display: block;
  font-size: 18px;
  height: 50px;
  line-height: 50px;
}
.nav a li{
  display: flex;
  justify-content: space-between;
  border-bottom: 0.05px solid #ddd;
}

</style>

到这里，那个三条横线变X号的动效就实现了。其实还可以继续优化，给导航加个transition：0.3s;再改变下top值应该就差不多。后面的渐入效果本人没试，感兴趣的小伙伴，可以自行尝试哦。