首页 > 其他分享 >vue3下拉菜单点击之后缓慢展开与缓慢关闭

vue3下拉菜单点击之后缓慢展开与缓慢关闭

时间:2024-08-30 21:47:12浏览次数:10  
标签:transition vue3 height background vw 缓慢 border 下拉菜单 size

利用 max-height 来实现下拉菜单的缓慢展开和关闭效果。通过设置一个固定的 max-height 值以及过渡效果,可以让菜单在展开和关闭时产生动画效果。

<template>
<div class="dropdown">
                        <div class="selected" @click="toggleDropdown">
                            <div class="text">{{ selectedOption.label }}</div>
                        </div>
                        <!-- :class="{ 'slide-down': isOpen, 'slide-up': !isOpen }" -->
                        <!-- v-if="isOpen" -->
                        <div class="dropdown-menu" :class="{ open: isOpen }">
                            <div class="option" v-for="option in options" :key="option.value"
                                @click="selectOption(option)">
                                <!-- <div class="icon-box">
                                    <img :src="option.icon" alt="" class="icon">
                                </div> -->
                                <div class="text">{{ option.label }}</div>
                            </div>
                        </div>
                    </div>
</template>
<style lang='scss' scope>
 .dropdown {
            width: 100%;
            position: relative;


            .selected {
                font-size: 14px;
                color: #333;
                border: none;
                box-sizing: border-box;
                // outline: 0 !important;
                margin: 0;
                cursor: pointer;
                display: flex;
                align-items: center;
                // border: 1px solid #eef3fd;
                background: #eef3fd;
                height: 2.604vw;
                padding: 0 2.083vw 0 1.041vw;
                border-radius: .729vw;
                height: 2.604vw;

                display: flex;
                align-items: center;

                // &:focus {
                //     border: 1px solid #88dadf;
                // }

                &::before {
                    content: "";
                    display: block;
                    width: .781vw;
                    height: .781vw;
                    background: url(../../assets/cardicons/arr2.png) center no-repeat;
                    -webkit-background-size: contain;
                    -moz-background-size: contain;
                    -o-background-size: contain;
                    background-size: contain;
                    position: absolute;
                    top: 50%;
                    right: .781vw;
                    margin-top: -.364vw;
                    transition: .4s;
                }


                .text {
                    line-height: 2.604vw;
                    color: #353d61;
                    font-weight: 700;
                    font-size: .937vw;
                }

            }


            .dropdown-menu {
                position: absolute;
                top: 125%;
                left: 0;
                right: 0;
                z-index: 1000;
                border-radius: 1.041vw;
                border: 1px solid #ddd;
                background-color: #fff;
                padding: .208vw;
                overflow: hidden;
                overflow-y: auto;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s linear, padding 0.3s linear, opacity 0.3s linear;
                opacity: 0;
                /* 过渡效果 */
                // max-height: 13.02vw;
                // max-height: 0;
                // opacity: 0;
                // transform: translateY(-10px);
                // transition: opacity 1s linear, transform 1s linear;

                // &.slide-down {
                //     opacity: 1;
                //     transform: translateY(0);
                // }

                // &.slide-up {
                //     opacity: 0;
                //     transform: translateY(-10px);
                // }
                &.open {
                    max-height: 300px;
                    opacity: 1;
                    /* 展开时最大高度 */
                    // padding: 0.5rem 0;
                    /* 展开时正常内边距 */
                }


                .option {
                    display: flex;
                    align-items: center;
                    border-radius: .52vw;
                    -webkit-transition: .3s;
                    -o-transition: .3s;
                    -moz-transition: .3s;
                    transition: .3s;
                    cursor: pointer;
                    padding: 0 .833vw;
                    height: 2.083vw;
                }

                .option:hover {
                    background-color: #eef3fd;
                }

                .text {
                    font-size: .833vw;
                    color: #353d61;
                    font-weight: 700;
                }
            }
        }
</script>
					
					

标签:transition,vue3,height,background,vw,缓慢,border,下拉菜单,size
From: https://www.cnblogs.com/xianlling/p/18389562

相关文章

  • Vue3+.NET7最新框架实战,手写电商管理后台|2023全新录制,前后分离架构(C#/.NET6/.NET Co
    Vue3+.NET7最新框架实战,手写电商管理后台|2023全新录制,前后分离架构(C#/.NET6/.NETCore)https://pan.baidu.com/s/1SBt4RTT_m6uA9pk857KlcQ?pwd=6666https://www.bilibili.com/video/BV16s4y1m7bd/?spm_id_from=333.337.search-card.all.click&vd_source=e6b56a12a1d9ef11f6c13......
  • 在Vue3中实现文件上传功能,结合后端API
    随着现代Web应用程序的不断发展,文件上传成为了用户交互中不可或缺的一部分。在本篇博客中,我们将深入讨论如何在Vue3中实现一个文件上传功能,并与后端API进行交互。我们将使用Vue3的CompositionAPI(setup语法糖)来构建我们的示例。##1.了解需求在实现文件上传之前,我们需要明确......
  • 实现一个动态评论系统:Vue3与后端API交互
    在当今的开发环境中,评论系统是多种应用中不可或缺的一部分,本文将带您深入了解如何使用Vue3实现一个动态评论系统,并与后端API进行交互。我们将重点使用Vue3的compositionAPI(setup语法糖)来构建这个系统。需求概述在构建动态评论系统时,我们需要实现以下功能:获取评论......
  • vue3-pinia保持数据时效性,不会因为刷新浏览器丢失实时数据(pinia-plugin-persistedstat
    1.方法一(pinia-plugin-persistedstate)1.安装插件-pinia-plugin-persistedstateyarnaddpinia-plugin-persistedstatenpmipinia-plugin-persistedstate2.在pinia中注册import{createPinia}from'pinia';importpiniaPluginPersistedstatefrom'pinia-pl......
  • Vue3的学习---11
    11.Vue组合式API11.1为什么要使用CompositionAPI11.1.1一个OptionsAPI实例在前面都是采用OptionsAPI(基于选项的API)来些一个组件,下面是一个实例<template>num:{{num}}<br>double:{{double}}<button@click="add">加</button></template><scri......
  • 【vue3】探讨为什么ref()换为reactive()数据不再是响应式?
    原问题:本来想使用数组中的filter方法,原来用的是lettableData=ref([])然后发现Ref上不再filter属性,所以就换成了lettableData=reactive([])但是这样有了一个新问题就是:数据加载不出来了,代码如下//获取文章列表数据 lettableData=reactive([]) functiongetArt......
  • 在vue3中实现一个截图上传图片功能
    <template><divclass="avatar-container"><el-dialog:title="title":model-value="dialogVisibleCorpper"width="800px"append-to-body@opened="openDialog":before-clos......
  • 在Vue3应用中使用TypeScript的最佳实践
    随着Vue3的推出,TypeScript逐渐成为了前端开发中的一种必备技能。Vue3的设计更好地支持TypeScript,这使得开发者可以在开发过程中充分利用TypeScript的强类型系统,从而提高代码的可维护性和可读性。在这篇博客中,我们将深入探讨在Vue3应用中使用TypeScript的最佳实践,并通过示例......
  • Vue3实现excel文件预览和打印
    预览excel关于实现excel文档在线预览的做法,一种方式是通过讲文档里的数据处理成html,一种是将文档处理成图片进行预览。首先我们先讲一下实现html这种方式预览的。Excel预览用的是xlsx这个库。xlsxxlsx是一个优秀的表格处理库,是一款适用于浏览器和nodejs的开源电子表格解析库"......
  • vue3导入excel表格并展示(使用xlsx插件+vite+element-plus)/js上传表格(js+xlsx)
    第一步:下载两个库npminstallfile-saver--savenpminstallxlsx--save第二步:引入import{saveAs}from'file-saver'import*asXLSXfrom'xlsx'第三步:给组件设置点击事件<el-form-item@click="handleExport">导出</el-for......