在使用transition标签实现过渡效果的时候，transition里面加上了mode="out-in"属性和appear属性
mode="out-in"和appear都是是自带的属性
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
/* 入场动画开始结束和过渡 */
.v-enter-from {
opacity: 0;
}
.v-enter-to {
opacity: 1;
}
.v-enter-active {
transition: opacity 1s linear;
}
/* 离开动画开始，结束 过渡 */
.v-leave-from {
opacity: 1;
}
.v-leave-to {
opacity: 0;
}
.v-leave-active {
transition: opacity 1s linear;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// 变量
data() {
return {
show: true,
};
},
// 逻辑
methods: {
toggleStatus() {
this.show = !this.show;
},
},
// 模板,在使用transition标签实现过渡效果的时候，transition里面加上了mode="out-in"属性和appear属性
// mode="out-in"和appear都是是自带的属性
template: `
<transition mode="out-in" appear>
<h1 v-if="show">welcome</h1>
<h1 v-else>goodbye</h1>
</transition>
<button @click="toggleStatus">切换</button>
`,
});
// 绑定
const vm = app.mount("#root");
</script>
</html>
