详解Vue中添加过渡效果

下面我来详细讲解一下如何在Vue中添加过渡效果，并附上两个示例：

准备工作

在Vue中添加过渡效果，需要使用Vue.js提供的transition组件。在使用之前，需要先通过CDN或者npm等方式将Vue.js引入到项目中。

在Vue中添加过渡效果的步骤

第一步：给需要添加过渡效果的元素添加<transition>标签

例如，我们想在一个按钮点击之后，让按钮的宽度从100px过渡到200px，并带有缓动效果。那么我们就需要给这个按钮添加<transition>标签，如下所示：

<template>
  <button @click="toggleWidth" class="btn">
    {{ width }}
  </button>
  <transition name="my-transition" mode="out-in">
    <div :style="{ width: width + 'px' }" class="box"></div>
  </transition>
</template>

可以看到，我们将需要添加过渡效果的元素包裹在了<transition>标签中。其中name属性用来指定过渡效果的名称，mode属性用来指定多个元素同时过渡时的模式，out-in表示新元素先过渡进入，然后旧元素过渡退出。

第二步：在<style>标签或CSS文件中定义过渡效果的样式

我们需要在CSS中定义过渡效果的样式，如下所示：

.my-transition-enter-active,
.my-transition-leave-active {
  transition: all 0.4s ease;
}

.my-transition-enter,
.my-transition-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

在这个示例中，我们定义了两个类，分别为.my-transition-enter-active和.my-transition-leave-active，它们控制过渡的缓动和持续时间；另外还定义了.my-transition-enter和.my-transition-leave-to，它们控制元素进入和离开时的样式。

第三步：在Vue实例中添加过渡效果的相关逻辑

在Vue实例中，我们需要使用<transition>标签的appear、beforeEnter、enter等属性，来定义过渡效果的各个阶段。如下所示：

export default {
  data() {
    return {
      width: 100
    }
  },
  methods: {
    toggleWidth() {
      this.width = this.width === 100 ? 200 : 100
    }
  },
  beforeEnter(el) {
    el.classList.add('my-transition-enter')
    el.style.opacity = 0
    el.style.transform = 'translateY(30px)'
  },
  enter(el, done) {
    this.$nextTick(() => {
      el.classList.remove('my-transition-enter')
      el.classList.add('my-transition-enter-active')
      el.style.opacity = 1
      el.style.transform = 'translateY(0)'
      el.addEventListener('transitionend', done)
    })
  },
  leave(el, done) {
    el.classList.add('my-transition-leave-active')
    el.style.opacity = 0
    el.style.transform = 'translateY(30px)'
    el.addEventListener('transitionend', done)
  }
}

在这个示例中，我们在Vue实例中定义了beforeEnter、enter和leave三个方法，分别控制元素进入、进入后激活、离开三个阶段的过渡效果。done参数是一个回调函数，表示一个过渡阶段结束后需要执行的操作，我们需要在回调函数中执行此操作。

示例1：添加列表的进出场动效

接下来，我们来看一个实际的例子。例如，我们有一个todo列表，当新添加一项时，希望展示一个简单的过渡效果。我们可以在<transition>标签中添加v-if指令，并在enter和leave阶段分别定义过渡效果，如下所示：

<template>
  <div>
    <h2>Todos</h2>
    <p v-if="todos.length === 0">No Todos yet!</p>
    <ul v-else>
      <transition-group
        name="fade"
        tag="ul"
        mode="out-in"
      >
        <li v-for="(todo, index) in todos" :key="todo.id" @click="remove(index)">
          {{ todo.text }}
        </li>
      </transition-group>
    </ul>
    <form @submit.prevent="addTodo">
      <label for="todoText">Add Todo:</label>
      <input type="text" id="todoText" v-model="newTodoText" />
      <button>Add Todo</button>
    </form>
  </div>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}

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

<script>
export default {
  data() {
    return {
      todos: [],
      newTodoText: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push({
        id: Date.now(),
        text: this.newTodoText
      })
      this.newTodoText = ''
    },
    remove(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

在这个示例中，我们使用了<transition-group>组件，并指定了name、tag和mode属性。name属性用来指定过渡效果的名称，tag属性用来指定过渡组件的标签，mode属性用来指定多个元素同时过渡时的模式。

在CSS中，我们为<transition-group>组件定义了过渡效果的样式，控制了元素进入和离开的透明度。

在Vue实例中，我们定义了addTodo方法，用于新增一个todo；定义了remove方法，用于删除单个todo。

示例2：添加淡入淡出动效

我们再来看一个示例：如何在Vue中添加淡入淡出的过渡效果？

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.box {
  width: 200px;
  height: 100px;
  background-color: #efefef;
}
</style>

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

在这个示例中，我们使用了<transition>组件，并在其子元素中使用v-if指令，来实现淡入淡出的效果。

在CSS中，我们为过渡组件和子元素定义了过渡效果的样式，实现了淡入淡出的效果。

总结

在Vue中使用transition组件，我们只需要简单的三步就可以完成过渡效果的添加：给需要添加过渡效果的元素添加<transition>标签、在CSS中定义过渡效果的样式、在Vue实例中添加过渡效果的相关逻辑。同时，在需要添加过渡效果的元素中，我们还可以使用v-if、v-show等指令，来自动控制过渡的开始和结束的时间。希望以上内容对你有所帮助！