需求，我正常的菜单功能有隐藏与显示功能，需要增加动画
打开的时候宽度从0到300，关闭的时候，宽度从300到0文章来源地址https://www.toymoban.com/news/detail-822848.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>
文章来源：https://www.toymoban.com/news/detail-822848.html
到了这里，关于vue折叠展开transition动画使用keyframes实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
