vue之transition（加深印象）

组件过渡使用条件：

• 条件渲染 v-if
• 条件展示 v-show
• 动态组件（keep-alive缓存显示隐藏的组件）
• 组件根节点

<!--
 * @Author: your name
 * @Date: 2021-06-08 18:06:58
 * @LastEditTime: 2021-06-09 09:37:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vuedemo/src/web/tranisition.vue
-->
<template>
  <div id="app">
    <el-button @click="show = !show">点我</el-button>
    <transition name="fade">
      <p v-if="show">hello world</p>
    </transition>

    <el-button @click="show2 = !show2">点我2</el-button>
    <transition name="bounce">
      <p v-if="show2">hello world2</p>
    </transition>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      show: true,
      show2: true,
    };
  },
  mounted() {},
};
</script>
<style lang="">
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

1. v-enter:定义进入过渡开始时的状态
2. v-enter-active:定义进入过渡生效时的状态
3. v-enter-to:定义进入过渡生效结束时的状态
4. v-leave:定义离开过渡开始时候状态
5. v-leave-active:定义离开过渡生效时的状态
6. v-leave-to:定义离开过渡结束时候的状态

自定义过渡的类名

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

用法：例如引用animates.css

  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
   </transition>