返回

Vue3：巧妙改变DOM属性，赋能动画效果

前端

在 Vue 3 中利用 Transition 和 TransitionGroup 组件轻松实现动画切换

Vue 3 引入了 Transition 和 TransitionGroup 组件，赋予开发者在组件切换时轻松添加动画效果的能力，从而增强用户体验。

Transition 组件：为单个组件添加动画

Transition 组件专门用于在单个组件切换期间应用动画。它的工作原理如下：

  1. 将要应用动画的元素包裹在 <transition> 标签内。
  2. 为 <transition> 标签添加 name 属性，指定一个唯一的名称。
  3. 在组件样式表中，分别为 .enter-active、.leave-active 和 .move-active 类定义进入、离开和更新时的动画效果。
<template>
  <transition name="fade">
    <div v-if="show">Hello World</div>
  </transition>
</template>

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

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

    return { show };
  }
}
</script>

<style>
.fade-enter-active {
  animation: fade-in 1s ease-in;
}

.fade-leave-active {
  animation: fade-out 1s ease-out;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>

TransitionGroup 组件：为多个组件添加动画

TransitionGroup 组件允许开发者同时对多个组件应用动画，控制它们进入和离开的顺序。其工作原理与 Transition 组件类似，但针对的是多个组件：

  1. 将需要动画的组件包裹在 <transition-group> 标签内。
  2. 为 <transition-group> 标签添加 name 属性，指定一个唯一的名称。
  3. 在组件样式表中，分别为 .enter-active、.leave-active 和 .move-active 类定义进入、离开和更新时的动画效果。
<template>
  <transition-group name="list">
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </transition-group>
</template>

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

export default {
  setup() {
    const items = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
    ]);

    return { items };
  }
}
</script>

<style>
.list-enter-active {
  animation: slide-in 1s ease-in;
}

.list-leave-active {
  animation: slide-out 1s ease-out;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}
</style>

与动画库结合使用

要更轻松地创建动画，开发者可以利用 Animate.css 等动画库或 Vue.js Motion 等专门针对 Vue 3 的动画库。这些库提供了一系列预定义的动画，只需将其应用到 Transition 或 TransitionGroup 组件的 .enter-active、.leave-active 和 .move-active 类即可。

结语

Transition 和 TransitionGroup 组件赋予 Vue 3 开发者强大功能，可以轻松添加动画效果并增强用户体验。通过理解和掌握这些组件，开发者可以创建引人入胜且交互丰富的应用程序。

常见问题解答

  1. Transition 组件和 TransitionGroup 组件之间有什么区别？

    • Transition 组件用于为单个组件添加动画效果，而 TransitionGroup 组件用于为多个组件添加动画效果。

  2. 如何为 Transition 组件添加自定义动画效果？

    • 在组件样式表中，为 .enter-active、.leave-active 和 .move-active 类定义动画效果。

  3. 如何使用 TransitionGroup 组件控制组件的进入和离开顺序？

    • 设置 <transition-group> 标签的 tag 属性，指定组件在 HTML 结构中的标签类型（例如 div 或 ul），以便浏览器理解组件的顺序。

  4. 可以在哪里找到更多关于 Transition 和 TransitionGroup 组件的资源？

  5. 是否存在其他类似于 Transition 和 TransitionGroup 组件的选项？

    • 是的，还有 Vibrate.js 等第三方库，提供更高级的动画功能。