模块框 vue3 渐出渐没

<!--  -->
<template>
  <div>
    <el-button type="primary" plain @click="hanlderMore"
          >>>>更多操作</el-button
        >
    <transition name="slide-fade">
            <div v-if="showEditMore" class="content">
                <div style="background-color: red; height: 500px;">

                </div>
            </div>
        </transition>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

const showEditMore = ref(false);

const hanlderMore = ()=>{
        showEditMore.value = !showEditMore.value
        console.log('123')

      }

</script>
<style>

.slide-fade-enter-active, .slide-fade-leave-active {
  transition: all 0.6s cubic-bezier(.55,0,.1,1); /* 使用缓动函数让动画更平滑 */
  overflow: hidden;
}

/* 定义进入的起始状态和离开的结束状态 */
.slide-fade-enter-from, .slide-fade-leave-to {
  max-height: 0;
  opacity: 0;
}

/* 定义进入的结束状态和离开的起始状态 */
.slide-fade-enter-to, .slide-fade-leave-from {
  max-height: 500px; /* 调整为最大可能的高度 */
  opacity: 1;
}

</style>