// 单元素、单组件 出场 入场 动画
// 入场:从隐藏态到显示
// 出场:从显示态到隐藏
<style>
/*
过渡 动画的封装
*/
/* 入场*/
/*开始*/
.v-enter-from {
opacity: 0;
}
/*整个过程怎么执行*/
.v-enter-active {
transition: opacity 3s ease-out;
}
/*结束*/
.v-enter-to {
opacity: 1;
}
/* 出场*/
.v-leave-from {
opacity: 1;
}
/*整个过程怎么执行*/
.v-leave-active {
transition: opacity 3s ease-in;
}
.v-leave-to {
opacity: 0;
}
</style>
<body>
<div id="root"></div>
</body>
<script>
// 单元素 单组件 出场 入场 动画
// 入场:从隐藏态到显示
// 出场:从显示态到隐藏
// 创建 vue实例
const app = Vue.createApp({
data() {
return {
show: false
}
},
methods:{
handleClick() {
this.show = !this.show
}
},
template: `
<div>
<transition>
<div v-if="show">
hello world!
</div>
</transition>
<button @click="handleClick">
切换
</button>
</div>
`
});
const vm = app.mount('#root');
</script>