vue2添加过渡动画

要在 Vue2 中添加过渡动画，可以使用 <transition> 元素和 <transition-group> 元素。<transition> 元素用于对单个元素进行过渡动画，而 <transition-group> 元素用于对多个元素进行过渡动画。

以下是一个使用 <transition> 元素的示例代码：

<template>
  <div>
    <transition name="fade">
      <div v-if="show" class="box">
        <!-- 内容 -->
      </div>
    </transition>
  </div>
</template>

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

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

在上面的代码中，我们使用了 <transition> 元素来对一个元素进行过渡动画。在样式中，我们定义了 fade 过渡名称的动画效果。当 show 数据改变时，Vue 会自动为元素添加进入或离开的过渡动画。

如果想要对多个元素进行过渡动画，可以使用 <transition-group> 元素。以下是一个使用 <transition-group> 元素的示例代码：

<template>
  <div>
    <transition-group name="fade">
      <div v-for="(item, index) in list" :key="index" class="box">
        <!-- 内容 -->
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    addItem() {
      this.list.push({ id: this.list.length + 1 })
    },
    removeItem() {
      this.list.pop()
    }
  }
}
</script>

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

在上面的代码中，我们使用了 <transition-group> 元素来对多个元素进行过渡动画。在样式中，我们同样定义了 fade 过渡名称的动画效果。当 list 数据改变时，Vue 会自动为新增或删除的元素添加过渡动画。