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>
相关推荐
晓131337 分钟前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor44 分钟前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军1 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到111 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡1 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu1 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂1 小时前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军1 小时前
React 实现多个节点 diff
前端·react.js·前端框架
用户40812812003811 小时前
拓展运算符和剩余参数
前端