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

曹天骄2024-01-24 10:50

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

打开的时候宽度从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>