这是一个点击隐藏的菜单按钮弹出折叠菜单的小组件,黑色部分为菜单,可以按需进行更改优化。
话不多说,效果如下:
那么现在来介绍代码:
一、html部分如下
<template>
<div class="about">
<div
:class="`menuBtn ${chooseBtn == true ? 'chooseMenu' : 'cancelMenu'}`"
@click="handleMenu()"
>
<div class="menuBg"></div>
</div>
<div :class="` ${chooseBtn == true ? 'bottomMenu' : 'noneMenu'}`">
<div class=""></div>
</div>
</div>
</template>
注解
需要声明一个变量用来存储每次点击的状态,初始为false也就是未点击。
都需要动态class来控制样式的更改,点击后状态更换为true,添加上chooseMenu的类名,如果是false为再一次点击收回菜单状态更换为false,添加cancelMenu类名。
二、javascript部分
data() {
return {
chooseBtn: false, //此为定义的按钮状态变量
};
},
methods: {
handleMenu() {
this.chooseBtn = this.chooseBtn == false ? true : false;
},
},
三、样式部分
.menuBtn {
position: absolute; //这里用到定位固定在屏幕下边,可以根据自己的实际情况进行样式调整,这里不重要
width: 3vw;
height: 3vw;
bottom: 1.5vh;
right: 1vw;
.menuBg {
width: 100%;
height: 100%;
background: url('../assets/img/menu.png') no-repeat; //menu.png是灰色按钮
background-size: 100% 100%;
}
.menuBg:hover {
background: url('../assets/img/menuHover.png') no-repeat; //menuHover.png是粉色按钮
background-size: 100% 100%;
}
}
.chooseMenu {
transform: rotate(45deg);
animation: chooseMenu 1s 1;
cursor: pointer;
.menuBg {
background: url('../assets/img/menuHover.png') no-repeat;
background-size: 100% 100%;
}
}
.cancelMenu {
transform: rotate(0deg);
animation: cancelMenu 1s 1;
cursor: pointer;
}
.bottomMenu {
width: 50%;
height: 5vh;
position: absolute;
background: #000;
bottom: 1.5vh;
right: 7vw;
opacity: 0;
animation: enterRight 0.5s ease-in-out 0.8s;
animation-fill-mode: forwards;
transform: translateX(50px);
}
.noneMenu {
width: 50%;
height: 5vh;
position: absolute;
background: #000;
bottom: 1.5vh;
right: 4.5vw;
opacity: 1;
animation: leaveLeft 0.5s ease-in-out 0.8s;
animation-fill-mode: forwards;
transform: translateX(-50px);
}
@keyframes chooseMenu {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
@keyframes cancelMenu {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes enterRight {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes leaveLeft {
to {
opacity: 0;
transform: translateX(0);
}
}
注解
可以根据自己实际情况进行样式调整