vue折叠展开transition动画使用keyframes实现

需求,我正常的菜单功能有隐藏与显示功能,需要增加动画

打开的时候宽度从0到300,关闭的时候,宽度从300到0

html 复制代码
<template>  
  <div id="app">  
    <button @click="toggleLength">Toggle Length</button>  
    <transition name="slide">  
      <div v-if="show" class="box"></div>  
    </transition>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  setup() {  
    const show = ref(false);  
  
    const toggleLength = () => {  
      show.value = !show.value;  
    };  
  
    return {  
      show,  
      toggleLength,  
    };  
  },  
};  
</script>  
  
<style>  
#app {  
  text-align: center;  
  margin-top: 60px;  
}  
  
button {  
  padding: 10px 20px;  
}  
  
.box {  
  width: 300px;  
  height: 100px;  
  background-color: red;  
  transition: width 2s; /* 添加过渡效果 */  
}  
  
/* 使用 @keyframes 定义过渡效果 */  
@keyframes slide {  
  0% { width: 0px; } /* 打开时宽度从0开始 */  
  100% { width: 300px; } /* 打开时宽度变为300 */  
}  
@keyframes slideReverse {  
  0% { width: 300px; } /* 关闭时宽度从300开始 */  
  100% { width: 0px; } /* 关闭时宽度变为0 */  
}  
  
.slide-enter-active, .slide-leave-active {  
  animation: slide 2s forwards; /* 应用定义的动画 */  
}  
.slide-leave-active {  
  animation-direction: reverse; /* 设置动画反向播放 */  
}  
</style>
相关推荐
IT_陈寒7 分钟前
Vue 3.4性能优化实战:5个鲜为人知的Composition API技巧让打包体积减少40%
前端·人工智能·后端
前端九哥12 分钟前
💻【急招!27届前端实习生】广州4399实习太幸福了!江景+三餐+健身房全都有😭
前端·面试·招聘
咖啡の猫18 分钟前
Vue全局事件总线
前端·javascript·vue.js
Lovereo41 分钟前
我的目标检测性能优化之路:预算不够、GPU 没有、但性能我得要
前端
T___T42 分钟前
JavaScript 变量声明详解:var、let、const 的核心差异
javascript·面试
蒙娜丽宁1 小时前
Rust 与 WebAssembly:构建高效前端应用的全流程复盘
前端·rust·wasm
这儿有一堆花1 小时前
使用 Actix-web 开发高性能 Web 服务
前端·数据库
豆苗学前端1 小时前
10分钟带你入门websocket,并实现一个在线多人聊天室
前端·javascript·后端
白水清风1 小时前
Vue3之渲染器
前端·vue.js·面试
刘永胜是我1 小时前
解决Volta环境下npm全局包卸载失败:一次深入排查之旅
前端·node.js