vue过度动画实现筛选
vue过渡动画实现筛选
在Vue中实现筛选功能的过渡动画，可以通过结合<transition>或<transition-group>组件与Vue的响应式数据特性来完成。以下是几种常见的实现方法：
使用transition-group实现列表筛选动画
通过v-for渲染列表，配合<transition-group>实现条目新增、删除或筛选时的动画效果。
<template>
<div>
<input v-model="searchQuery" placeholder="筛选条件">
<transition-group name="list" tag="ul">
<li v-for="item in filteredList" :key="item.id">
{{ item.name }}
</li>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
}
},
computed: {
filteredList() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>
<style>
.list-enter-active, .list-leave-active {
transition: all 0.5s ease;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>使用CSS过渡类名自定义动画
通过定义Vue过渡的6个CSS类名（v-enter/v-leave等），实现更复杂的动画效果。
/* 缩放动画 */
.filter-enter-active {
transition: transform 0.3s cubic-bezier(0.5, 0, 0.5, 1.5), opacity 0.3s;
}
.filter-leave-active {
transition: transform 0.2s, opacity 0.2s;
}
.filter-enter {
opacity: 0;
transform: scale(0.9);
}
.filter-leave-to {
opacity: 0;
transform: scale(0.9);
}<transition name="filter" mode="out-in">
<div key="filtered-content">
<!-- 筛选后的内容 -->
</div>
</transition>结合Animate.css库实现预置动画
通过引入第三方动画库快速实现专业动画效果。
<transition-group
enter-active-class="animate__animated animate__fadeInDown"
leave-active-class="animate__animated animate__fadeOutUp"
>
<!-- 列表内容 -->
</transition-group>需先安装Animate.css：
npm install animate.css然后在main.js中引入：
import 'animate.css'JavaScript钩子实现复杂动画
通过transition的JavaScript钩子（beforeEnter/enter等）配合GSAP等动画库实现高级效果。
methods: {
beforeEnter(el) {
el.style.opacity = 0
el.style.transform = 'translateX(50px)'
},
enter(el, done) {
gsap.to(el, {
opacity: 1,
x: 0,
duration: 0.5,
onComplete: done
})
}
}<transition
@before-enter="beforeEnter"
@enter="enter"
:css="false"
>
<!-- 内容 -->
</transition>注意事项
- 始终为
v-for列表中的元素设置唯一的key属性 - 使用
mode="out-in"避免新旧元素同时出现的问题 - 复杂动画建议使用
requestAnimationFrame或动画库优化性能 - 移动端注意硬件加速（使用
transform和opacity属性）
通过组合这些技术，可以创建从简单到复杂的各种筛选动画效果，提升用户体验。
