当前位置：首页 > VUE

vue过度动画实现筛选

2026-02-22 21:22:33VUE

Vue 过渡动画实现筛选功能

在 Vue 中实现筛选功能并结合过渡动画，可以通过以下方法完成：

准备数据与筛选逻辑

定义需要筛选的数据列表和筛选条件。使用计算属性动态生成筛选后的结果，确保响应式更新。

data() {
  return {
    items: [
      { id: 1, name: 'Apple', category: 'fruit' },
      { id: 2, name: 'Carrot', category: 'vegetable' },
      { id: 3, name: 'Banana', category: 'fruit' }
    ],
    filterCategory: ''
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => 
      this.filterCategory ? item.category === this.filterCategory : true
    )
  }
}

添加过渡动画

使用 Vue 的 <transition-group> 包裹动态渲染的列表元素，为元素的进入、离开和移动添加动画效果。

vue过度动画实现筛选

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

定义 CSS 过渡样式

为过渡效果编写对应的 CSS 样式，控制动画的持续时间、缓动函数等属性。

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

实现筛选交互

vue过度动画实现筛选

添加用户交互控件，如按钮或下拉菜单，用于触发筛选条件的变化。

<select v-model="filterCategory">
  <option value="">All</option>
  <option value="fruit">Fruit</option>
  <option value="vegetable">Vegetable</option>
</select>

优化性能

对于大型列表，可以使用 v-memo 或虚拟滚动技术减少 DOM 操作，提升动画流畅度。

<transition-group name="list" tag="ul">
  <li v-for="item in filteredItems" :key="item.id" v-memo="[filteredItems]">
    {{ item.name }}
  </li>
</transition-group>

通过以上步骤，可以实现一个具有平滑过渡动画的筛选功能，提升用户体验。