使用的场景:
刚进入页面.数据还没有显示,图片也没有,可以搭配骨架屏,带有这些动画!
Vue2中与Vue3中的动画节点函数名称不同
-
进入(显示,创建)
-
v-enter 进入前 (vue3.0 v-enter-from)
-
v-enter-active 进入中
-
v-enter-to 进入后
-
-
离开(隐藏,移除)
-
v-leave 离开前 (vue3.0 v-leave-from)
-
v-leave-active 离开中
-
v-leave-to 离开后
-
注意:多个transition使用不同动画,可以添加name属性,name属性的值替换v即可。
案例:
<template>
<button @click="showFn">点击</button>
<transition name="fade"> // 写了name 就可以替换v了
<div v-if="show">100</div>
</transition>
</template>
<script>
import { ref } from 'vue' // 响应式的
export default {
setup() {
const show = ref(true) // 初始值是true
const showFn = () => {
show.value = !show.value //取反
}
return { show, showFn }
}
}
</script>
<style lang="less" scoped>
.fade-leave-from, // 离开前,进入后透明度是1
.fade-enter-to {
opacity: 1;
}
.fade-leave-active,
.fade-enter-active {
transition: all 2s; //过度是2秒
}
.fade-leave-to,
.fade-enter-from {
opacity: 0;
}
</style>