Vue 宝典之动画(transition)

文章目录

• • [🥑Vue 过渡效果的基础概念](#🥑Vue 过渡效果的基础概念)
  • • [🫒`<transition>` 组件的基本用法](#🫒<transition> 组件的基本用法)
    • [🫒 过渡类名](#🫒 过渡类名)
    • [🫒CSS 过渡](#🫒CSS 过渡)
  • [🥑Vue.js 中的高级动画特性](#🥑Vue.js 中的高级动画特性)
  • • 🫒多个元素的过渡
    • [🫒使用 JavaScript 钩子函数控制动画](#🫒使用 JavaScript 钩子函数控制动画)
    • • [🍆 `beforeEnter`, `enter`, `afterEnter`, `enterCancelled`](#🍆 beforeEnter, enter, afterEnter, enterCancelled)
      • [🍆`beforeLeave`, `leave`, `afterLeave`, `leaveCancelled`](#🍆beforeLeave, leave, afterLeave, leaveCancelled)
  • 🥑结语

动画在前端开发中是一种强大的交互设计工具，它可以使用户界面更生动、更具吸引力。在 Vue.js 中，动画可以通过过渡效果和动画系统来实现。下面详细介绍 Vue.js 中动画的相关概念、使用方法和一些高级特性。

🥑Vue 过渡效果的基础概念

🫒<transition> 组件的基本用法

在 Vue.js 中，过渡效果主要通过 <transition> 组件来实现。这个组件可以包裹任意元素或组件，并在元素进入或离开 DOM 时应用过渡效果。下面是一个简单的例子：

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

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

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

在这个例子中，<transition> 包裹了一个 <p> 元素，该元素根据条件 show 的值在进入或离开 DOM 时应用过渡效果。通过 CSS 规则，定义了元素透明度的变化，从而实现了淡入淡出的效果。

🫒 过渡类名

在过渡过程中，Vue 会为元素添加不同的类名，以触发 CSS 过渡效果。这些类名包括：

• v-enter: 进入过渡的开始状态。
• v-enter-active: 进入过渡的结束状态，过渡过程中的状态。
• v-enter-to: 2.1.8+ 版本新增，与 v-enter-active 类名一样，用于过渡结束后的状态。
• v-leave: 离开过渡的开始状态。
• v-leave-active: 离开过渡的结束状态，过渡过程中的状态。
• v-leave-to: 2.1.8+ 版本新增，与 v-leave-active 类名一样，用于过渡结束后的状态。

通过这些类名，我们可以在 CSS 中定义不同过渡阶段的样式，从而控制元素的过渡效果。

🫒CSS 过渡

通过定义过渡类名，我们可以在 CSS 中具体规定过渡效果的样式。下面是一个简单的例子：

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}

.fade-enter-active, .fade-leave-active /* .fade-leave-active in <2.1.8 */ {
  transition: opacity 1s;
}

在这个例子中，我们定义了透明度的过渡效果，使得元素在进入或离开时都有一个渐变的效果。

🥑Vue.js 中的高级动画特性

🫒多个元素的过渡

当有多个元素需要过渡时，可以使用 <transition-group> 组件。它能够为列表中的每个元素应用过渡效果，并能够控制元素的排序和动画。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        // ...
      ],
    };
  },
};
</script>

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

在这个例子中，<transition-group> 包裹了一个 <ul> 元素和动态生成的列表。每次列表项变化时，都会触发过渡效果。

🫒使用 JavaScript 钩子函数控制动画

除了在模板中使用动画钩子函数外，还可以在 JavaScript 中直接使用 this.$refs 来访问 <transition> 组件的实例，从而控制动画。

<transition name="fade" ref="myTransition">
  <p v-if="show">Hello, Vue!</p>
</transition>

<script>
export default {
  methods: {
    playCustomAnimation() {
      const transition = this.$refs.myTransition;
      transition.beforeEnter(el => {
        // 在元素进入之前执行的操作
      });
      transition.enter(el => {
        // 在元素进入时执行的操作
      });
      transition.afterEnter(el => {
        // 在元素进入之后执行的操作
      });
      transition.enterCancelled(el => {
        // 如果进入过渡被取消
      });

      // 触发过渡效果
      transition.enter(el => {
        // 执行一些其他逻辑
      });
    },
  },
};
</script>

通过这种方式，可以更加动态地控制动画的执行流程，根据实际需求来定制动画的行为。

🍆 beforeEnter, enter, afterEnter, enterCancelled

这组钩子函数允许你在元素进入时执行特定的操作，比如改变元素的样式、添加事件监听器等。

<template>
  <transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled">
    <p v-if="show">Hello, Vue!</p>
  </transition>
</template>

<script>
export default {
  methods: {
    beforeEnter(el) {
      // 在元素进入之前执行的操作
    },
    enter(el, done) {
      // 在元素进入时执行的操作
      done(); // 这是告诉 Vue 过渡结束的标志
    },
    afterEnter(el) {
      // 在元素进入之后执行的操作
    },
    enterCancelled(el) {
      // 如果进入过渡被取消
    },
  },
  data() {
    return {
      show: true,
    };
  },
};
</script>

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

🍆beforeLeave, leave, afterLeave, leaveCancelled

这组钩子函数用于定义元素离开时的过渡效果。

<template>
  <transition name="fade" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled">
    <p v-if="show">Hello, Vue!</p>
  </transition>
</template>

<script>
export default {
  methods: {
    beforeLeave(el) {
      // 在元素离开之前执行的操作
    },
    leave(el, done) {
      // 在元素离开时执行的操作
      done(); // 这是告诉 Vue 过渡结束的标志
    },
    afterLeave(el) {
      // 在元素离开之后执行的操作
    },
    leaveCancelled(el) {
      // 如果离开过渡被取消
    },
  },
  data() {
    return {
      show: true,
    };
  },
};
</script>

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

通过这些 JavaScript 钩子函数，我们可以更加灵活地控制过渡效果的细节，执行一些自定义的操作。

🥑结语

Vue.js 提供了丰富的工具和特性，使得动画在前端开发中变得更加简便而强大。通过合理使用过渡效果、动画钩子函数以及相关的高级特性，我们能够创建出更具创意和吸引力的用户界面。在实际项目中，结合具体需求和设计思路，深入理解并灵活应用这些动画特性，将会为用户提供更为优秀的交互体验。

---

🏫博客主页：魔王-T

🥝大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️

---