步骤:       ①在目标元素外包裹<transition name="xx">       ②定义class样式           指定过度样式:transition           指定隐藏时样式:opacity/其他  

 

 注意事项：

1、需要过渡的元素要有 v-if 或者是 v-show 切换

2、将需要添加过渡效果的元素用 <transition></transition> 组件包裹起来

<template>
  <!-- 动画&过渡 -->
  <div>
      <!-- 步骤:
      ①在目标元素外包裹<transition name="xx">
          ②定义class样式
          指定过度样式:transition
          指定隐藏时样式:opacity/其他 -->
    <el-button type="primary" @click="isShow=!isShow">toggle01</el-button>
    <!-- 如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="xxx">，那么 v-enter 会替换为 xxx-enter -->
    <transition name="xxx">
      <p v-show="isShow">我来了！</p>
    </transition>
    <el-button type="primary" @click="isShow01=!isShow01">toggle02</el-button>
    <!-- 如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="xxx">，那么 v-enter 会替换为 xxx-enter -->
    <transition name="move">
      <p v-show="isShow01">我来了！</p>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true,
      isShow01: true
    };
  }
};
</script>
<style lang="less" scoped>
// v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线
.xxx-enter-active,
.xxx-leave-active {
  transition: opacity 1s;
}
.xxx-enter,
.xxx-leave-to {
  opacity: 0;
}
// 隐藏的过度效果
.move-enter-active {
  transition: all 1s;
}
.move-leave-active {
  transition: all 3s;
}
// 隐藏时的样式
.move-enter,
.move-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>