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

本文主要是介绍vue折叠展开transition动画使用keyframes实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求，我正常的菜单功能有隐藏与显示功能，需要增加动画
打开的时候宽度从0到300，关闭的时候，宽度从300到0

<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>

这篇关于vue折叠展开transition动画使用keyframes实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---