<template><button@click="show = !show"> {{show}}</button><transition><h1:class="{animate__animated:true, animate__fadeIn:show,animate__fadeOut:!show,}">一段淡入淡出的动画文字。
</h1></transition></template><scriptlang="ts">import { defineComponent, ref } from'vue';
exportdefaultdefineComponent({
setup(){
return {
show: ref(true)
    }
  }
});
</script><style>.v-enter-active,
.v-leave-active {
transition: opacity0.5sease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

<template><button@click="show = !show"> {{show}}</button><transitionname="fade"><h1:class="{animate__animated:true, animate__fadeIn:show,animate__fadeOut:!show,}">一段淡入淡出的动画文字。
</h1></transition></template><scriptlang="ts">import { defineComponent, ref } from'vue';
exportdefaultdefineComponent({
setup(){
return {
show: ref(true)
    }
  }
});
</script><style>.fade-enter-active,
.fade-leave-active {
transition: opacity0.5sease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

<template><transitionname="custom-classes"enter-active-class="animate__animated animate__tada"leave-active-class="animate__animated animate__bounceOutRight"><pv-if="show">hello</p></transition></template><scriptlang="ts">import { defineComponent, ref } from'vue';
import'animate.css';
exportdefaultdefineComponent({});
</script>

<Transitiontype="animation">...</Transition>

<Transitionname="nested"><divv-if="show"class="outer"><divclass="inner">      Hello
</div></div></Transition>

<Transition:duration="550">...</Transition>

<Transition@before-enter="onBeforeEnter"@enter="onEnter"@after-enter="onAfterEnter"@enter-cancelled="onEnterCancelled"@before-leave="onBeforeLeave"@leave="onLeave"@after-leave="onAfterLeave"@leave-cancelled="onLeaveCancelled"><!-- ... --></Transition>

<TransitionGrouptag="ul"name="slide"><liv-for="item in items":key="item.id">    {{ item.text }}
</li></TransitionGroup>

<template><button@click="add()"> 添加 </button><button@click="pop()"> 删除 </button><TransitionGroupname="list"tag="ul"><liv-for="item in items":key="item">    {{ item }}
</li></TransitionGroup></template><scriptlang="ts">import { defineComponent, ref } from'vue';
exportdefaultdefineComponent({
setup(){
return {
items: ref([1,2,3,4,5,6])
    }
  },
methods:{
add(){
this.items.push(
Math.round(Math.random()*10)
      )
    },
pop(){
this.items.pop()
    }
  }
});
</script><stylelang="scss"scoped>.list-enter-active,
.list-leave-active {
transition: all0.5sease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>

<TransitionGrouptag="ul":css="false"@before-enter="onBeforeEnter"@enter="onEnter"@leave="onLeave"><liv-for="(item, index) in computedList":key="item.msg":data-index="index">    {{ item.msg }}
</li></TransitionGroup>

<router-viewv-slot="{ Component }"><transition><keep-alive><component:is="Component"/></keep-alive></transition></router-view>

<Suspense><template#default><router-viewv-slot="{ Component, route }"><transition:name="route.meta.transition || 'fade'"mode="out-in"><keep-alive><component:is="Component":key="route.meta.usePathKey ? route.path : undefined"/></keep-alive></transition></router-view></template><template#fallback> Loading... </template></Suspense>

<template><h1class="animate__animated animate__bounce ">一段跳动的动画文字。</h1></template><scriptlang="ts">import'animate.css';
import { defineComponent, } from'vue';
exportdefaultdefineComponent({})
</script>

<stylelang="scss"scoped>.animate__animated.animate__bounce {
--animate-duration: 2s;
}
</style>

<stylelang="scss"scoped>:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}
</style>

<template><h1class="my-element">一段跳动的动画文字。</h1></template><scriptlang="ts">import'animate.css';
import { defineComponent, } from'vue';
exportdefaultdefineComponent({})
</script><stylescropd>.my-element {
display: inline-block;
margin: 00.5rem;
animation: bounce;      /* 直接引用动画的 @keyframe 声明 */animation-duration: 2s; /* 别忘了设置时长！ */}
</style>

<template><h1class="animate__animated animate__bounce ">一段跳动的动画文字。</h1></template><scriptlang="ts">import { defineComponent } from'vue';
import'animate.css';
exportdefaultdefineComponent({
beforeMount(){
// 所有动画将花费两倍的时间来完成document.documentElement.style.setProperty('--animate-duration', '.1s');
  }
});
</script>

<!-- 重复2次 --><divclass="animate__animated animate__bounce animate__repeat-2">Example</div>

<template><transitionname="custom-classes"enter-active-class="animate__animated animate__tada"leave-active-class="animate__animated animate__bounceOutRight"><pv-if="show">hello</p></transition></template><scriptlang="ts">import { defineComponent, ref } from'vue';
import'animate.css';
exportdefaultdefineComponent({});
</script>

<router-view:class="{'jcadmin-childPage':true,'animate__animated': true,'animate__zoomInDown': true,'animate__zoomOutDown': false,}"></router-view>