当前位置：首页 > VUE

vue实现删除特效

2026-01-19 14:11:27VUE

在Vue中实现删除特效可以通过CSS过渡、动画或第三方库（如Animate.css）实现。以下是几种常见方法：

使用Vue过渡效果

Vue内置了<transition>组件，结合CSS实现淡出或滑动删除效果。

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">点击按钮我会消失</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return { show: true }
  }
}
</script>

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

使用动画库（Animate.css）

通过Animate.css快速实现预设动画效果。

<template>
  <transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <p v-if="show">动画效果文本</p>
  </transition>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return { show: true }
  }
}
</script>

列表删除动画

对v-for渲染的列表项添加删除动画效果。

<template>
  <div>
    <button @click="removeItem">删除最后一项</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '项目1' },
        { id: 2, text: '项目2' }
      ]
    }
  },
  methods: {
    removeItem() {
      this.items.pop()
    }
  }
}
</script>

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

高级交互动画

通过JavaScript钩子实现复杂动画逻辑。

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <p v-if="show">JavaScript动画</p>
  </transition>
</template>

<script>
export default {
  data() {
    return { show: true }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      Velocity(el, { opacity: 1 }, { duration: 1000, complete: done })
    },
    leave(el, done) {
      Velocity(el, { opacity: 0 }, { duration: 1000, complete: done })
    }
  }
}
</script>

每种方法适用于不同场景：简单过渡用CSS、快速开发用动画库、列表操作用transition-group、复杂交互使用JavaScript钩子。根据项目需求选择合适方案，注意动画性能优化避免卡顿。

vue实现删除特效