博客站

在 Vue 3 中实现动画可以通过以下几种方式：

1. 使用 Vue 的内置过渡组件（如 <transition> 和 <transition-group>）。
2. 使用 CSS 动画或过渡。
3. 使用 JavaScript 钩子实现更复杂的动画。
4. 结合第三方动画库（如 GSAP 或 Animate.css）。

以下是详细的实现方法：

1. 使用 Vue 的内置过渡组件

Vue 3 提供了 <transition> 和 <transition-group> 组件，用于在元素插入、更新或移除时添加动画效果。

基本用法

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">Hello, Vue 3!</p>
  </transition>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);
    return { show };
  },
};
</script>

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

解释

• <transition> 组件包裹需要动画的元素。
• name="fade" 指定动画的类名前缀（如 fade-enter-active）。
• v-if 或 v-show 控制元素的显示和隐藏。
• CSS 类名：
  • fade-enter-from：元素进入的初始状态。
  • fade-enter-active：元素进入的过渡效果。
  • fade-leave-active：元素离开的过渡效果。
  • fade-leave-to：元素离开的最终状态。

2. 使用 CSS 动画

除了过渡效果，还可以使用 CSS 动画实现更复杂的效果。

示例

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="bounce">
    <p v-if="show">Hello, Vue 3!</p>
  </transition>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);
    return { show };
  },
};
</script>

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>

3. 使用 JavaScript 钩子

Vue 3 的 <transition> 组件提供了 JavaScript 钩子，可以实现更复杂的动画逻辑。

示例

<template>
  <button @click="show = !show">Toggle</button>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <p v-if="show">Hello, Vue 3!</p>
  </transition>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);

    function beforeEnter(el) {
      el.style.opacity = 0;
      el.style.transform = 'translateX(100px)';
    }

    function enter(el, done) {
      const animation = el.animate(
        [
          { opacity: 0, transform: 'translateX(100px)' },
          { opacity: 1, transform: 'translateX(0)' },
        ],
        { duration: 500 }
      );
      animation.onfinish = done;
    }

    function leave(el, done) {
      const animation = el.animate(
        [
          { opacity: 1, transform: 'translateX(0)' },
          { opacity: 0, transform: 'translateX(100px)' },
        ],
        { duration: 500 }
      );
      animation.onfinish = done;
    }

    return { show, beforeEnter, enter, leave };
  },
};
</script>

解释

• @before-enter：元素进入前的钩子。
• @enter：元素进入的钩子。
• @leave：元素离开的钩子。
• :css="false"：禁用 CSS 过渡，完全使用 JavaScript 控制动画。

4. 使用第三方动画库

结合第三方动画库（如 GSAP 或 Animate.css）可以实现更丰富的动画效果。

使用 GSAP

<template>
  <button @click="show = !show">Toggle</button>
  <transition @enter="enter" @leave="leave" :css="false">
    <p v-if="show">Hello, Vue 3!</p>
  </transition>
</template>

<script>
import { ref } from 'vue';
import gsap from 'gsap';

export default {
  setup() {
    const show = ref(true);

    function enter(el, done) {
      gsap.from(el, {
        opacity: 0,
        x: 100,
        duration: 0.5,
        onComplete: done,
      });
    }

    function leave(el, done) {
      gsap.to(el, {
        opacity: 0,
        x: 100,
        duration: 0.5,
        onComplete: done,
      });
    }

    return { show, enter, leave };
  },
};
</script>

使用 Animate.css

<template>
  <button @click="show = !show">Toggle</button>
  <transition
    enter-active-class="animate__animated animate__bounceIn"
    leave-active-class="animate__animated animate__bounceOut"
  >
    <p v-if="show">Hello, Vue 3!</p>
  </transition>
</template>

<script>
import { ref } from 'vue';
import 'animate.css';

export default {
  setup() {
    const show = ref(true);
    return { show };
  },
};
</script>

5. 列表动画

使用 <transition-group> 实现列表项的动画效果。

示例

<template>
  <button @click="addItem">Add Item</button>
  <button @click="removeItem">Remove Item</button>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item">{{ item }}</li>
  </transition-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([1, 2, 3]);

    function addItem() {
      items.value.push(items.value.length   1);
    }

    function removeItem() {
      items.value.pop();
    }

    return { items, addItem, removeItem };
  },
};
</script>

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

6. 总结

在 Vue 3 中实现动画的常见方法包括：

1. 使用内置过渡组件：<transition> 和 <transition-group>。
2. 使用 CSS 动画或过渡：通过 CSS 实现简单的动画效果。
3. 使用 JavaScript 钩子：实现更复杂的动画逻辑。
4. 结合第三方动画库：如 GSAP 或 Animate.css。

通过以上方法，你可以在 Vue 3 中轻松实现各种动画效果，提升用户体验。