vite+ts+vue3 知识点（transition动画组件）

基本使用

安装css动画库

npm install animate.css --save

子组件

<template>
    <div>
        <div class="divBgc"></div>
    </div>
</template>

<script setup lang="ts" name="A">
</script>

<style scoped lang="less">
.divBgc {
    width: 200px;
    height: 200px;
    background-color: pink;
}
</style>

父组件

<template>
  <div>
    <button @click="btn">切换</button>
    // enter-active-class 表示进入时的css效果
    // leave-active-class 表示离开时的css效果
    // duration 表示动画过渡时间，可以写一个数，表示动画进入离开时间相同
    <transition enter-active-class="animate__animated animate__bounce"
      leave-active-class="animate__animated animate__rubberBand" :duration="{ enter: 500, leave: 1000 }">
      <A v-if="flag"></A>
    </transition>

  </div>
</template>

<script setup lang="ts">
import 'animate.css'
import { ref } from 'vue';
import A from './components/A.vue'
import B from './components/B.vue'
const flag = ref<boolean>(true)
const btn = () => {
  flag.value = !flag.value
}
</script>

<style scoped lang="less">

</style>

生命周期

<template>
  <div>
    <el-button type="primary" @click="btn">切换</el-button>
    <transition 
        @beforeEnter="enterFrom" 
        @enter="enterActive" 
        @afterEnter="enterTo" 
        @enterCancelled="enterCancel"
        @beforeLeave="leaveFrom" 
        @leave="leaveActive" 
        @afterLeave="leaveTo" 
        @leaveCancelled="leaveCancel">
      <slotTest v-if="flag"></slotTest>
    </transition>
  </div>
</template>

<script setup lang="ts">
import slotTest from '@/components/slotTest.vue'
const flag = ref(true)

const btn = () => {
  flag.value = !flag.value
}

const enterFrom = (el: Element) => {
  console.log('进入之前');
}

const enterActive = (el: Element, done: Function) => {
  console.log('过渡曲线');
  setTimeout(() => {
    done()
  }, 3000);
}

const enterTo = (el: Element) => {
  console.log('过渡完成');
}

const enterCancel = (el: Element) => {
  console.log('过渡效果被打断');
}

const leaveFrom = (el: Element) => {
  console.log('离开之前');
}

const leaveActive = (el: Element, done: Function) => {
  console.log('离开过渡曲线');
  setTimeout(() => {
    done()
  }, 3000);
}

const leaveTo = (el: Element) => {
  console.log('离开过渡完成');
}

const leaveCancel = (el: Element) => {
  console.log('离开过渡效果被打断');
}
</script>

<style scoped lang="less">

</style>

appear属性

 // 页面加载完动画就开始执行
 <transition 
      appear 
      appearFromClass="from" 
      appearActiveClass="active" 
      appearToClass="to"
>
      <div class="content" v-if="flag"></div>
 </transition>

过渡列表

<transition-group 
    enterActiveClass="animate__animated  animate__backOutUp"
    leaveActiveClass="animate__animated animate__bounceIn"
>
    <div v-for="item in arr" :key="item">{{ item }}</div>
</transition-group>