当前位置： 技术文章>> Vue.js 如何实现过渡和动画效果？

文章标题：Vue.js 如何实现过渡和动画效果？
  • 文章分类: 后端
  • 5026 阅读
文章标签: vue vue基础

Vue.js 提供了强大的过渡和动画系统，通过 <transition> 和 <transition-group> 组件来轻松实现元素的进入、离开以及列表的过渡效果。Vue 在这些元素应用或移除时，会自动添加/移除 CSS 类，你可以利用这些类名来定义过渡和动画效果。

使用 <transition> 组件

<transition> 组件用于包裹一个元素或组件，以实现进入/离开/列表的过渡效果。Vue 会自动在适当的时机添加或移除 .v-enter-active、.v-leave-active 等 CSS 类。

基本用法：

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello</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 /* .fade-leave-active 在 <2.1.8 版本中 */ {
  opacity: 0;
}
</style>

使用 <transition-group> 组件

<transition-group> 组件与 <transition> 类似，但它用于处理多个元素的过渡，并且这些元素可以有不同的进入和离开动画。<transition-group> 默认渲染一个 <span>，但你可以通过 tag 属性改变它。

基本用法：

<template>
  <div id="list-demo">
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
    <transition-group name="list" tag="p">
      <span v-for="(item, index) in items" :key="item.id" class="list-item">
        {{ item.text }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        // ...
      ],
      nextId: 3
    }
  },
  methods: {
    addItem() {
      this.items.push({ id: this.nextId++, text: 'Item ' + this.nextId });
    },
    removeItem() {
      this.items.length && this.items.pop();
    }
  }
}
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: opacity 1s;
}
.list-enter, .list-leave-to /* .list-leave-active 在 <2.1.8 版本中 */ {
  opacity: 0;
}
</style>

CSS 过渡和动画

在 Vue 的过渡系统中，你可以使用 CSS 的 transition 或 @keyframes 动画来定义过渡效果。Vue 会在元素进入、离开或列表元素位置变化时自动添加/移除相应的 CSS 类。

JavaScript 钩子

除了 CSS 过渡和动画，Vue 还允许你使用 JavaScript 钩子（如 beforeEnter、enter、afterEnter 等）来控制过渡逻辑，这在你需要更复杂的逻辑或是不希望使用 CSS 过渡时非常有用。

通过 Vue 的过渡系统，你可以轻松地为你的 Vue 应用添加丰富的动画和过渡效果，从而提升用户体验。

推荐文章