来源: https://blog.csdn.net/wangxiaoxiaosen/article/details/77309552
关于appear的用户和enter的用法相似，它只是在第一次渲染的时候才会起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始渲染的过渡</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>
</head>
<style>
.custom-appear-active{
color: #2fe26d;
background: #b6b6b6;
transition: all 1s ease;
}
.custom-appear{
font-size: 40px;
color: #e069e2;
background: #7798e2;
}
.custom-appear-to{
color: #e29138;
background: #1c8942;
}
</style>
<body>
<div id="app">
<transition
appear
appear-class="custom-appear"
appear-to-class="custom-appear-to"
appear-active-class="custom-appear-active"
>
<p>appear</p>
</transition>
</div>
<script>
new Vue({
el: "#app"
})
</script>
</body>
</html>
enter用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始渲染的过渡</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>
</head>
<style>
.custom-appear-active{
color: #2fe26d;
background: #b6b6b6;
transition: all 1s ease;
}
.custom-appear{
font-size: 40px;
color: #e069e2;
background: #7798e2;
}
.custom-appear-to{
color: red;
background: red;
}
</style>
<body>
<div id="app">
<div>
<transition
enter-class="custom-appear"
enter-to-class="custom-appear-to"
enter-active-class="custom-appear-active"
>
<p v-if="show">appear</p>
</transition>
<button @click="show=true">显示</button>
</div>
</div>
<script type="module">
new Vue({
el: "#app",
data:{
show: false,
},
})
</script>
</body>
</html>
网友评论