自定义动画实现动画持续时间，延迟时间

<template>
  <div>
    <transition
    :duration="5000"
    
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
      animate__delay-2s
    >
      <div class="box" v-if="a"></div>
    </transition>
    <button @click="a = !a">切换</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: false,
    };
  },
};
</script>
<style lang="less">
.box {
  width: 200px;
  height: 200px;
  background-color: orange;
}
</style>

自定义动画添加持续时间-- ：duration

<transition
      :duration="5000"
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp" >
</transition>

自定义动画添加延迟时间–：animate__delay-2s

 <transition

      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
      animate__delay-2s>
</transition>

动画组件使用-magic

1.安装magic.css

npm i magic.css

2.main.js引入css

import 'magic.css'

3.使用组件

<template>
  <div>
    <transition 
    enter-active-class="tinRightIn"
    leave-active-class="tinDownOut"
    >
    <div class="box" v-if="a"></div>
    </transition>
    <button @click="a = !a">切换</button>
  </div>
</template>