初始渲染的过渡
可以通过
appearattribute 设置节点在初始渲染的过渡
<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>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始渲染的过渡</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="hzh">
<button @click="hzhShow = !hzhShow">
切换
</button>
<transition
appear
appear-class="hzh-appear-class"
appear-to-class="hzh-appear--to-class"
appear-active-class="hzh-appear-active-class"
>
<p v-if="hzhShow">
黄子涵
</p>
</transition>
</div>
<script>
new Vue({
el: '#hzh',
data: {
hzhShow: false
}
})
</script>
</body>
自定义 JavaScript 钩子：
<transition
appear
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
v-on:appear-cancelled="customAppearCancelledHook"
>
<!-- ... -->
</transition>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始渲染的过渡</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="hzh">
<button @click="hzhShow = !hzhShow">
切换
</button>
<transition
appear
v-on:before-appear="hzhBeforeAppearHook"
v-on:appear="hzhAppearHook"
v-on:after-appear="hzhAfterAppearHook"
v-on:appear-cancelled="hzhAppearCancelledHook"
>
<p v-if="hzhShow">
黄子涵
</p>
</transition>
</div>
<script>
new Vue({
el: '#hzh',
data: {
hzhShow: false
}
})
</script>
</body>
在上面的例子中，无论是
appearattribute 还是v-on:appear钩子都会生成初始渲染过渡。
