其实这个很简单，出发点就是想做一个点击切换的功能
原生html+css+js代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav-mobile-button {
position: relative;
float: left;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
outline: none;
border-radius: 4px;
}
.nav-mobile-button .same:nth-child(1){
margin-top: 0;
}
.nav-mobile-button .same {
display: block;
margin-top: 4px;
width: 22px;
height: 2px;
background: rgb(63, 81, 181);
border-radius: 1px;
}
.nav-mobile-button .icon-bar1 {
transform: translate(0,0) rotate(-45deg);
}
.nav-mobile-button .icon-bar2 {
display: none;
}
.nav-mobile-button .icon-bar3 {
transform: translate(0,-250%) rotate(45deg);
}
.box{
width: 400px;
height: 500px;
background-color: #eee;
transform: translate(-400px,0);
}
</style>
</head>
<body>
<button class="nav-mobile-button">
<span id="span1" class="same"></span>
<span id="span2" class="same"></span>
<span id="span3" class="same"></span>
</button>
<div class="box">
</div>
</body>
<script>
var oSpan1 = document.getElementById('span1'),
oSpan2 = document.getElementById('span2'),
oSpan3 = document.getElementById('span3');
var oBtn = document.querySelector(".nav-mobile-button"),
oBox = document.querySelector(".box");
oBtn.onclick = function() {
oSpan3.style.cssText = "transform: translate(0,-250%) rotate(45deg);transition: transform 1s;";
oSpan1.style.cssText = "transform: translate(0,0) rotate(-45deg);transition: transform 1s;margin-top:4px;";
oSpan2.style.display = "none";
oBox.style.cssText = "transform: translate(0,0);transition: transform 1s;"
oBtn.style.cssText = "z-index:1000;right:-48%;transition: right 1s;";
}
</script>
</html>
点击三杠按钮之后切换成这种效果
将其改成了vue组件
menu.vue
<template>
<div>
<button class="nav-mobile-button" @click="change" ref="btn">
<span id="span1" class="same"></span>
<span id="span2" class="same"></span>
<span id="span3" class="same"></span>
</button>
<div class="box" ref="box">
</div>
</div>
</template>
<script>
export default {
name: 'menu',
data() {
return {
}
},
methods: {
change() {
this.$emit("change")
}
}
}
</script>
<style scoped lang="scss">
*{
margin: 0;
padding: 0;
}
.nav-mobile-button {
position: relative;
float: left;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
outline: none;
border-radius: 4px;
}
.nav-mobile-button .same:nth-child(1){
margin-top: 0;
}
.nav-mobile-button .same {
display: block;
margin-top: 4px;
width: 22px;
height: 2px;
background: rgb(63, 81, 181);
border-radius: 1px;
}
.box{
width: 400px;
height: 500px;
background-color: #eee;
transform: translate(-400px,0);
}
</style>
引入应用如下
Menu.vue
<template>
<v-menu ref="menu" @change="change"></v-menu>
</template>
<script>
import menu from "@/menu/menu"
export default {
name: 'menu',
components: {
"v-menu": menu,
},
data() {
return {
b: false,
vChilds: null,
vBtn: null,
vBox: null
}
},
mounted() {
this.vChilds = this.$refs.menu.$refs.btn.childNodes;
this.vBtn = this.$refs.menu.$refs.btn;
this.vBox = this.$refs.menu.$refs.box;
this.vBtn.style.cssText = "z-index:1000;right:0;transition: right 1s;";
},
methods: {
change() {
if(!this.b){
this.vChilds[0].style.cssText = "transform: translate(0,0) rotate(-45deg);transition: transform 1s;margin-top:4px;";
this.vChilds[1].style.display = "none";
this.vChilds[2].style.cssText = "transform: translate(0,-250%) rotate(45deg);transition: transform 1s;";
this.vBtn.style.cssText = "z-index:1000;right:-26%;transition: right 1s;";
this.vBox.style.cssText = "transform: translate(0,0);transition: transform 1s;";
}else{
this.vChilds[0].style.cssText = "transform: translate(0,0) rotate(0);transition: transform 1s;margin-top:4px;";
this.vChilds[1].style.display = "block";
this.vChilds[2].style.cssText = "transform: translate(0,0) rotate(0);transition: transform 1s;";
this.vBtn.style.cssText = "z-index:1000;right:0;transition: right 1s;";
this.vBox.style.cssText = "transform: translate(-400px,0);transition: transform 1s;";
}
this.b = !this.b;
}
}
}
</script>
至此大功告成
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)