1. Transition (创建动画)
<template >
<Transition name ="slide-fade" >
<p v-if ="show" > hello</p >
</Transition >
</template >
<script setup >
import {ref} from 'vue' ;
const show = ref (true );
</script >
<style >
.slide-fade-enter-active {
transition : all 0.3s ease-out;
}
.slide-fade-leave-active {
transition : all 0.8s cubic-bezier (1 , 0.5 , 0.8 , 1 );
}
.slide-fade-enter-from ,
.slide-fade-leave-to {
transform : translateX (20px );
opacity : 0 ;
}
</style >
<template >
<Transition name ="bounce" >
<p v-if ="show" style ="text-align: center;" >
Hello here is some bouncy text!
</p >
</Transition >
</template >
<script setup >
import {ref} from 'vue' ;
const show = ref (true );
</script >
<style >
.bounce-enter-active {
animation : bounce-in 0.5s ;
}
.bounce-leave-active {
animation : bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform : scale (0 );
}
50% {
transform : scale (1.25 );
}
100% {
transform : scale (1 );
}
}
</style >
<Transition
name ="custom-classes"
enter-active-class ="animate__animated animate__tada"
leave-active-class ="animate__animated animate__bounceOutRight"
>
<p v-if ="show" > hello</p >
</Transition >
通过javascropt钩子实现动画 (结合动画库GSAP, Anime.js)
<Transition
:css ="false"
@before-enter ="onBeforeEnter"
@enter ="onEnter"
@after-enter ="onAfterEnter"
@enter-cancelled ="onEnterCancelled"
@before-leave ="onBeforeLeave"
@leave ="onLeave"
@after-leave ="onAfterLeave"
@leave-cancelled ="onLeaveCancelled"
>
</Transition >
<script setup >
function onBeforeEnter (el ) {}
function onEnter (el, done ) {
done ()
}
function onAfterEnter (el ) {}
function onEnterCancelled (el ) {}
function onBeforeLeave (el ) {}
function onLeave (el, done ) {
done ()
}
function onAfterLeave (el ) {}
function onLeaveCancelled (el ) {}
</script >
2. TransitionGroup (在列表中创建动画)
<template >
<TransitionGroup name ="list" tag ="ul" >
<li v-for ="item in items" :key ="item" >
{{ item }}
</li >
</TransitionGroup >
</template >
<style >
.list-move ,
.list-enter-active ,
.list-leave-active {
transition : all 0.5s ease;
}
.list-enter-from ,
.list-leave-to {
opacity : 0 ;
transform : translateX (30px );
}
.list-leave-active {
position : absolute;
}
</style >
3. KeepAlive (在多个组件间动态切换时缓存被移除的组件实例)
<KeepAlive >
<component :is ="activeComponent" />
</KeepAlive >
包含和排除需要缓存的组件 (include, exclude)
<KeepAlive :include ="['a', 'b']" >
<component :is ="view" />
</KeepAlive >
<KeepAlive :max ="10" >
<component :is ="activeComponent" />
</KeepAlive >
<script setup >
import { onActivated, onDeactivated } from 'vue'
onActivated (() => {
})
onDeactivated (() => {
})
</script >
4. Teleport (将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去)
<button @click ="open = true" > Open Modal</button >
<Teleport to ="body" >
<div v-if ="open" class ="modal" >
<p > Hello from the modal!</p >
<button @click ="open = false" > Close</button >
</div >
</Teleport >
5. Suspense (在组件树中协调对异步依赖的处理)
<Suspense >
<Dashboard />
<template #fallback >
Loading...
</template >
</Suspense >
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战