065_末晨曦Vue技术_过渡 & 动画之初始渲染的过渡
初始渲染的过渡
可以通过 appear attribute 设置节点在初始渲染的过渡
<transition appear>
<!-- ... -->
</transition>
这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。
<transition
appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class" (2.1.8+)
appear-active-class="custom-appear-active-class"
>
<!-- ... -->
</transition>
自定义 JavaScript 钩子：
<transition
appear
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
v-on:appear-cancelled="customAppearCancelledHook"
>
<!-- ... -->
</transition>
在上面的例子中，无论是 appear attribute 还是 v-on:appear 钩子都会生成初始渲染过渡。
完整案例：
<template>
<div id="app">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<!-- 初始渲染的过渡 -->
<!-- 通过 appear attribute 设置节点在初始渲染的过渡 -->
<transition
appear
enter-active-class="animate__animated animate__swing"
leave-active-class="animate__animated animate__flash"
>
<p v-if="show">hello</p>
</transition>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
show: true
}
},
mounted() {
},
components:{
},
methods:{
}
}
</script>
<style scoped>
</style>
