59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
<template>
|
|
<NuxtLayout>
|
|
<NuxtPage
|
|
:transition="{
|
|
name: 'page',
|
|
mode: 'out-in'
|
|
}"
|
|
/>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, onBeforeUnmount } from 'vue'
|
|
import { useMainStore } from '@/stores/main'
|
|
import { useRouter } from 'vue-router'
|
|
const mainStore = useMainStore()
|
|
const router = useRouter()
|
|
|
|
router.beforeEach((to, from, next) => {
|
|
mainStore.setDarkHeroBack(false)
|
|
next()
|
|
})
|
|
|
|
|
|
|
|
// Scroll- und Resize-Listener in den Lifecycle-Hooks registrieren
|
|
onMounted(() => {
|
|
window.addEventListener('scroll', handleScroll)
|
|
window.addEventListener('resize', handleResize)
|
|
// Bildschirmbreite direkt beim Start setzen:
|
|
handleResize()
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('scroll', handleScroll)
|
|
window.removeEventListener('resize', handleResize)
|
|
})
|
|
|
|
// Event-Handler
|
|
const handleScroll = () => {
|
|
mainStore.setScrollPosition(window.scrollY)
|
|
}
|
|
|
|
const handleResize = () => {
|
|
mainStore.setScreenWidth(window.innerWidth)
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.page-enter-active,
|
|
.page-leave-active
|
|
transition: opacity 0.3s ease, transform 0.3s ease
|
|
|
|
.page-enter-from,
|
|
.page-leave-to
|
|
opacity: 0
|
|
transform: scale(1.02)
|
|
</style>
|