Add transition
This commit is contained in:
parent
fef31bf189
commit
3dfb9af7c9
|
|
@ -26,6 +26,7 @@ onMounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<Transition>
|
||||||
<div v-if="state.showOverview">
|
<div v-if="state.showOverview">
|
||||||
<CircleOverview :circle-data="circleStore.circleData" @close="state.showOverview = false"/>
|
<CircleOverview :circle-data="circleStore.circleData" @close="state.showOverview = false"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -77,7 +78,22 @@ onMounted(() => {
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Transition>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
|
.v-enter-active,
|
||||||
|
.v-leave-active {
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-enter-from,
|
||||||
|
.v-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-enter-active {
|
||||||
|
transition-delay: 0.3s;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue