vue实现过度切换

Vue 过渡切换实现方法

Vue 提供了 <transition> 和 <transition-group> 组件实现元素进入/离开的过渡效果，核心步骤分为以下部分：

基础过渡实现

1. 添加 <transition> 包装需要过渡的元素

   <transition name="fade">
   <div v-if="show">内容</div>
   </transition>

2. 定义 CSS 过渡类名

   .fade-enter-active, .fade-leave-active {
   transition: opacity 0.5s;
   }
   .fade-enter, .fade-leave-to {
   opacity: 0;
   }

动画实现

1. 使用 CSS 动画关键帧

   .bounce-enter-active {
   animation: bounce-in 0.5s;
   }
   .bounce-leave-active {
   animation: bounce-in 0.5s reverse;
   }
   @keyframes bounce-in {
   0% { transform: scale(0) }
   50% { transform: scale(1.2) }
   100% { transform: scale(1) }
   }

2. 自定义过渡类名

   <transition
   enter-active-class="animated tada"
   leave-active-class="animated bounceOutRight"
   >
   <div v-if="show">内容</div>
   </transition>

列表过渡

1. 使用 <transition-group> 实现列表动画

   <transition-group name="list" tag="ul">
   <li v-for="item in items" :key="item.id">
    {{ item.text }}
   </li>
   </transition-group>

2. 定义列表过渡样式

   .list-enter-active, .list-leave-active {
   transition: all 1s;
   }
   .list-enter, .list-leave-to {
   opacity: 0;
   transform: translateY(30px);
   }

动态过渡

1. 通过绑定属性实现动态效果

   <transition :name="transitionName">
   <div v-if="show">内容</div>
   </transition>

2. 在组件中控制过渡名称

   

   data() {
   return {
    transitionName: 'fade'
   }
   }

注意事项

• 始终为列表项指定唯一的 key 属性
• CSS 过渡/动画时间需与 JavaScript 钩子同步
• 使用 appear 属性实现初始渲染过渡
• 复杂动画可结合 Velocity.js 等库实现

通过组合这些方法，可以创建从简单到复杂的各种过渡效果，满足不同场景的交互需求。