vue过渡动画实现
Vue过渡动画实现方法
Vue提供了<transition>和<transition-group>组件来实现元素进入/离开的过渡动画效果，主要通过CSS或JavaScript钩子实现。
基本过渡实现
定义CSS过渡类名配合<transition>组件：
<transition name="fade">
<div v-if="show">内容</div>
</transition>对应CSS样式：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}自定义过渡类名
可以覆盖默认的v-前缀类名：
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<div v-if="show">内容</div>
</transition>JavaScript钩子
通过钩子函数实现更复杂的动画：
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<div v-if="show">内容</div>
</transition>methods: {
beforeEnter(el) {
el.style.opacity = 0
},
enter(el, done) {
Velocity(el, { opacity: 1 }, { duration: 500, complete: done })
}
}列表过渡
使用<transition-group>实现列表动画：
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}初始渲染过渡
使用appear属性实现初始渲染动画：
<transition
appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class"
appear-active-class="custom-appear-active-class"
>
<div>内容</div>
</transition>多元素过渡
相同标签名元素需要添加key属性：
<transition mode="out-in">
<button v-if="isEditing" key="save">保存</button>
<button v-else key="edit">编辑</button>
</transition>过渡模式
设置mode属性控制进入/离开时序：
in-out：新元素先进入，当前元素后离开out-in：当前元素先离开，新元素后进入
<transition name="fade" mode="out-in">
<!-- 内容 -->
</transition>性能优化建议
使用transform和opacity属性制作动画，这些属性不会触发重排，性能更好。避免在过渡中使用height、margin等会触发布局改变的属性。对于复杂动画可以考虑使用CSS的will-change属性或Web动画API。
