vue实现删除特效

vue实现删除特效的方法

使用CSS过渡动画

通过Vue的<transition>组件结合CSS过渡效果实现删除动画。在元素被移除时触发动画效果。

<template>
  <div>
    <button @click="removeItem">删除</button>
    <transition name="fade">
      <div v-if="show" class="item">要删除的内容</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    removeItem() {
      this.show = false
    }
  }
}
</script>

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

使用Animate.css库

利用第三方动画库Animate.css快速实现丰富的删除动画效果。

<template>
  <div>
    <button @click="removeItem">删除</button>
    <transition
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <div v-if="show" class="item">内容</div>
    </transition>
  </div>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    removeItem() {
      this.show = false
    }
  }
}
</script>

使用JavaScript钩子实现复杂动画

通过Vue过渡的JavaScript钩子实现更复杂的删除动画逻辑。

<template>
  <div>
    <button @click="removeItem">删除</button>
    <transition
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
    >
      <div v-if="show" class="item" ref="item">内容</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    removeItem() {
      this.show = false
    },
    beforeLeave(el) {
      el.style.opacity = 1
    },
    leave(el, done) {
      let opacity = 1
      const timer = setInterval(() => {
        opacity -= 0.1
        el.style.opacity = opacity
        if (opacity <= 0) {
          clearInterval(timer)
          done()
        }
      }, 50)
    },
    afterLeave() {
      console.log('动画完成')
    }
  }
}
</script>

列表删除动画

使用<transition-group>为列表项添加删除动画效果。

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

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

<style>
.list-item {
  transition: all 0.5s;
}
.list-leave-active {
  position: absolute;
}
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

结合GSAP实现高级动画

使用GSAP动画库创建更流畅的删除动画效果。

<template>
  <div>
    <button @click="removeItem">删除</button>
    <transition
      @enter="enter"
      @leave="leave"
      :css="false"
    >
      <div v-if="show" class="item" ref="item">内容</div>
    </transition>
  </div>
</template>

<script>
import gsap from 'gsap'
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    removeItem() {
      this.show = false
    },
    enter(el, done) {
      gsap.from(el, {
        opacity: 0,
        y: 50,
        duration: 0.5,
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        opacity: 0,
        x: 100,
        duration: 0.5,
        onComplete: done
      })
    }
  }
}
</script>

每种方法适用于不同场景，从简单的CSS过渡到复杂的JavaScript动画，可根据项目需求选择合适的实现方式。