transition配合animate.js

<template>

  <div @click="flag = !flag">switch</div>

  不根据name来设置动画效果,指定自定义的class名

  <transition

    :duration="{ enter: 1000, leave: 5000 }"

    enter-active-class="animate__animated animate__bounce"

    leave-active-class="animate__animated animate__animated">

    <!-- enter-active-class="e-enter-active"> -->

    duration直接传数字为同时设置两个数值

    配合animate.css使用,npm i animate.css -S,然后main.js中import 'animate.css'

    <div v-if="flag" class="box">Hello World</div>

  </transition>

  </template>

 

  <script setup lang='ts'>

  import { ref } from 'vue'

 

  let flag = ref(true)

  </script>

 

  <style scoped lang='scss'>

  .box {

    width: 100px;

    height: 100px;

    background-color: red;

  }

  // 不通过transition的name属性,设置动画效果,而是通过自定义的class名

  .e-enter-form {

    width: 0px;

    height: 0px;

  }

  .e-enter-active {

    transition: all 1s ease;

  }

  .e-enter-to {

    width: 200px;

    height: 200px;

  }

  .e-leave-form {

    width: 200px;

    height: 200px;

  }

  .e-leave-active {

    transition: all 5s ease;

  }

  .e-leave-to {

    width: 0px;

    height: 0px;

  }

  </style>