转场动画：动画效果 css 动画 animate.css

实现动画的方式

<template>
  <button @click="show = !show">改变</button>
  <!-- 1..css
       1.使用transition组件包裹组件
       2.会自动在适当的时机,给元素加上6个类名
       进入：
        v-enter-from : 进入前
        v-enter-to : 进入后
        v-enter-active : 整个进入的过程
       离开：
        v-leave-from : 进入前
        v-leave-to : 进入后
        v-leave-active : 整个进入的过程
        3.加name属性 name ="fade"
        进入：
        fade-enter-from : 进入前
        fade-enter-to : 进入后
        fade-enter-active : 整个进入的过程
       离开：
        fade-leave-from : 进入前
        fade-leave-to : 进入后
        fade-leave-active : 整个进入的过程

   -->
  <Transition name="fade">
    <div v-show="show">方法一css</div>
  </Transition>
  <!-- 2..使用动画 -->
  <Transition name="run">
    <div v-show="show">方法二动画</div>
  </Transition>
  <!-- 3..使用插件 -->
  <!-- yarn add animate.css
    main.js中引入 import 'animate.css'
   -->
  <!--  利用animate的动画  将进入动画类名指定成animat.css 的动画类名，即可复用动画-->
  <Transition
    name="run"
    enter-active-class="animate__animated animate__bounceInDown"
    leave-active-class="animate__animated animate__bounceOutDown"
  >
    <div v-show="show">使用插件</div>
  </Transition>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const show = ref(true)
    return {
      show
    }
  }
}
</script>

<style scoped>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 在显示隐藏的时候有动画效果 */
  /* vue的动画效果 */
}
/* 转场动画 --1 用css过渡实现 */
/* .fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
.fade-enter-active,
.fade-leave-active {
  transition: all 3s;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: translateX(0%);
} */
/*  */
/* 转场动画 --2 用动画实现 */
@keyframes shan {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
/* 配合动画 run-enter-active run-leave-active */
.run-enter-active {
  animation: shan 0.3s;
}
.run-leave-active {
  /* animation-direction: alternate;// 交替 */
  animation: shan 0.3s reverse;
}
</style>

css样式
// 离开淡出动画
.fade {
  &-leave {
    &-active{
      position: absolute;
      width: 100%;
      transition: opacity 5s .2s;
      z-index: 1;
    }
    &-to {
      opacity: 0;
    }
  }
}