vue3实现右下角扇形导航菜单动画效果

点头yes

已于 2023-10-25 18:16:32 修改

阅读量692

点赞数 5

文章标签： vue.js 前端 javascript css

于 2023-10-25 16:03:48 首次发布

本文链接：https://blog.csdn.net/m0_67253104/article/details/134034301

版权

效果如下：

实现的大概思路：一级导航：先把图片定位到右下角，并绑定事件，控制蓝色大图片的切换，

再给二级子菜单动态添加css动画。

二级导航：同理，给子菜单绑定点击事件，控制表单的显示与隐藏，二级菜单没有添加动画，

后续可以自己添加。

实现代码如下：

div部分（img图片自己换一下）

<!-- 扇形菜单图标 -->
    <div class="button">
        <img :style="buttonClose" @click="menuClose" src="../../assets/button-close.png" alt="">
        <img :style="buttonQuery" @click="menuQuery" src="../../assets/button-query.png" alt="">
        <img :style="buttonStyle" @click="menu" src="../../assets/button.png" alt="">
    </div>
    <!-- 子菜单图标 -->
    <div class="item-menu">
        <img :class="inAnimation" :style="menuStyle" src="../../assets/menu-white.png" alt="">
        <img :class="inAnimationTwo" @click="itemMenu" :style="menuStyleTwo" src="../../assets/menu-blue.png" alt="">
        <img :class="inAnimationThree" :style="menuStyleThree" src="../../assets/menu-white.png" alt="">
        <img :class="inAnimationFour" :style="menuStyleFour" src="../../assets/menu-white.png" alt="">
    </div>
    <!-- table查询条件 -->
    <div class="el-query" v-show="show">
        <div class="query-title">查询条件</div>
        <div class="el-left">
            <div>
                <el-date-picker
                    v-model="value"
                    type="daterange"
                    style="width: 92%;"
                    size="large"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <el-select v-model="value1" placeholder="护理项目" style="width: 100%;" size="large">
                <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
            <el-select v-model="value2" placeholder="护理团队" style="width: 100%;" size="large">
                <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
            <el-select v-model="value3" placeholder="护理人员" style="width: 100%;" size="large">
                <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
            <div>
                <el-button @click="empty">清空</el-button>
                <el-button @click="query" type="primary">查询</el-button>
            </div>
        </div>
    </div>

js部分（查询组件的data未粘贴）

import { ref,onMounted } from 'vue';

// 按钮弹出框
let inAnimation = ref();
let inAnimationTwo = ref();
let inAnimationThree = ref();
let inAnimationFour = ref();
let menuStyle = ref({
    display: "none"
})
let menuStyleTwo = ref({
    display: "none"
})
let menuStyleThree = ref({
    display: "none"
})
let menuStyleFour = ref({
    display: "none"
})
let buttonStyle = ref({
    width: "100px",
    position: "absolute",
    "z-index": "500",
    right: "0.5vw",
    bottom: "3vh",
})
let buttonClose = ref({
    "display":"none"
})
let buttonQuery = ref({
    "display":"none"
})

// 扇形打开
let booooo = ref(true);
let menu = ()=>{
    if(booooo.value){
        menuStyle.value = {
            display:"block"
        }
        menuStyleTwo.value = {
            display:"block"
        }
        menuStyleThree.value = {
            display:"block"
        }
        menuStyleFour.value = {
            display:"block"
        }
        buttonStyle.value = {
            display:"none"
        }
        buttonQuery.value = {
            display:"block",
            width: "100px",
            position: "absolute",
            "z-index": "500",
            right: "0.5vw",
            bottom: "3vh",
        }
        inAnimation.value="inAnimation"
        inAnimationTwo.value="inAnimationTwo"
        inAnimationThree.value="inAnimationThree"
        inAnimationFour.value="inAnimationFour"
        booooo.value = false
    }
}

// 扇形换查询图标
let menuQuery = ()=>{
    setTimeout(() => {
        menuStyle.value = {
            display:"none"
        }
        menuStyleTwo.value = {
            display:"none"
        }
        menuStyleThree.value = {
            display:"none"
        }
        menuStyleFour.value = {
            display:"none"
        }
        booooo.value = true
    }, 500);
    
    buttonStyle.value = {
        display:"block",
        width: "100px",
        position: "absolute",
        "z-index": "500",
        right: "0.5vw",
        bottom: "3vh",
    }
    buttonQuery.value = {
        display:"none"
    }
    inAnimation.value="inAnimationClose"
    inAnimationTwo.value="inAnimationTwoClose"
    inAnimationThree.value="inAnimationThreeClose"
    inAnimationFour.value="inAnimationFourClose"
}

// 子菜单打开
let show = ref(false);
let itemMenu = ()=>{
    if(show.value==false){
        show.value = true;
        buttonQuery.value = {
            display:"none"
        }
        buttonClose.value = {
            display:"block",
            width: "100px",
            position: "absolute",
            "z-index": "500",
            right: "0.5vw",
            bottom: "3vh",
        }
    }else{
        menuClose();
    }
}

// 扇形关闭子菜单
let menuClose = ()=>{
    show.value = false;
    buttonClose.value = {
        display:"none"
    }
    buttonQuery.value = {
        display:"block",
        width: "100px",
        position: "absolute",
        "z-index": "500",
        right: "0.5vw",
        bottom: "3vh",
    }
}

css部分

.item-menu>img{
    display: none;
    z-index: 500;
    width: 70px;
    position: absolute;
    right: 0.5vw;
    bottom: 3vh;
}
.inAnimation{
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-name: AuxSlideFromBot;
}
@keyframes AuxSlideFromBot {
    from {
        transform: translateX(0px);
    }
    to {
        transform: translateX(-100px);
    }
}
.inAnimationClose{
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-name: AuxSlideFromBotClose;
}
@keyframes AuxSlideFromBotClose {
    from {
        transform: translateX(-100px);
    }
    to {
        transform: translateX(0px);
    }
}
.inAnimationTwo{
    z-index: 600!important;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-name: AuxSlideFromBotTwo;
}
@keyframes AuxSlideFromBotTwo {
    from {
        transform: translateX(0px);
    }
    to {
        transform: translate(-85px,-50px);
    }
}
.inAnimationTwoClose{
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-name: AuxSlideFromBotTwoClose;
}
@keyframes AuxSlideFromBotTwoClose {
    from {
        transform: translate(-85px,-50px);
    }
    to {
        transform: translateX(0px);
    }
}
.inAnimationThree{
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-name: AuxSlideFromBotThree;
}
@keyframes AuxSlideFromBotThree {
    from {
        transform: translateX(0px);
    }
    to {
        transform: translate(-45px,-80px);
    }
}
.inAnimationThreeClose{
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-name: AuxSlideFromBotThreeClose;
}
@keyframes AuxSlideFromBotThreeClose {
    from {
        transform: translate(-45px,-80px);
    }
    to {
        transform: translateX(0px);
    }
}
.inAnimationFour{
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-name: AuxSlideFromBotFour;
}
@keyframes AuxSlideFromBotFour {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-100px);
    }
}
.inAnimationFourClose{
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-name: AuxSlideFromBotFourClose;
}
@keyframes AuxSlideFromBotFourClose {
    from {
        transform: translateY(-100px);
    }
    to {
        transform: translateY(0px);
    }
}
.el-query{
    width: 240px;
    padding: 2vh 1vw;
    position: absolute;
    right: 175px;
    z-index: 600;
    bottom: 4vh;
    border-radius: 8px;
    height: 26vh;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
}
.query-title{
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    color: #1358B2;
}
.el-left{
    margin-top: 1vh;
    height: 23vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

代码写的有点臃肿，有很多地方可以封装，后期大家可以按需求封装更改。

头次发博客，希望能帮到各位。