transition類名變更
-
v-enter→v-enter-from -
v-leave→v-leave-from
vue2.0transition的使用
<template>
<div>
<h1>動畫測試</h1>
<button @click="visible = !visible">切換</button>
<transition name="fade">
<div v-show="visible">這是一段文本</div>
</transition>
</div>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s ease;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
<script>
export default {
data() {
return {
visible: true,
};
},
};
</script>
vue3.0中transition的使用
<template>
<div>
<h1>動畫測試</h1>
<button @click="visible = !visible">
{{ visible ? "點擊隱藏" : "點擊顯示" }}
</button>
<transition name="fade">
<div v-show="visible">這是一段文本</div>
</transition>
</div>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: all 2s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
<script lang='ts'>
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
visible: true,
};
},
});
</script>
<style scoped>
</style>
很明顯的對比屯断，除了這個變化踱承，使用方式跟vue2.0的一摸一樣砰左，這邊不做贅述钠右。
