ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add animation

This commit is contained in:
Christian Cueni 2022-07-27 09:58:27 +02:00
parent a9ab3ef2fc
commit 53f01701ad
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/components/circle/CircleOverview.vue
View File

@ -1,8 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
// inspiration https://vuejs.org/examples/#modal
import {Circle} from '@/services/circle'; import {Circle} from '@/services/circle';
const props = defineProps<{ const props = defineProps<{
circle: Circle circle: Circle,
show: boolean
}>() }>()
const emits = defineEmits(['closemodal']) const emits = defineEmits(['closemodal'])
@ -10,8 +12,10 @@ const emits = defineEmits(['closemodal'])
</script> </script>
<template> <template>
<Teleport to="body"> <Transition mode="in-out">
<div class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full"> <div
v-if="show"
class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full">
<div <div
class="w-8 h-8 absolute right-4 top-4 cursor-pointer" class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
@click="$emit('closemodal')" @click="$emit('closemodal')"
@ -50,7 +54,7 @@ const emits = defineEmits(['closemodal'])
</ul> </ul>
</div> </div>
</Teleport> </Transition>
</template> </template>
<style scoped> <style scoped>

12
client/src/views/CircleView.vue
View File

@ -26,11 +26,13 @@ onMounted(async () => {
<template> <template>
<div> <div>
<Transition mode="out-in"> <Teleport to="body">
<div v-if="circleStore.page === 'OVERVIEW'"> <CircleOverview
<CircleOverview :circle="circleStore.circle" @closemodal="circleStore.page = 'INDEX'"/> :circle="circleStore.circle"
</div> :show="circleStore.page === 'OVERVIEW'"
</Transition> @closemodal="circleStore.page = 'INDEX'"
/>
</Teleport>
<Transition mode="out-in"> <Transition mode="out-in">
<div v-if="circleStore.page === 'LEARNING_CONTENT'"> <div v-if="circleStore.page === 'LEARNING_CONTENT'">
<LearningContent :key="circleStore.currentLearningContent.translation_key"/> <LearningContent :key="circleStore.currentLearningContent.translation_key"/>