28 lines
656 B
Vue
28 lines
656 B
Vue
<script setup lang="ts">
|
|
const root = ref<HTMLElement>()
|
|
const visible = ref(false)
|
|
let observer: IntersectionObserver | undefined
|
|
|
|
onMounted(() => {
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
visible.value = true
|
|
return
|
|
}
|
|
observer = new IntersectionObserver(([entry]) => {
|
|
if (entry?.isIntersecting) {
|
|
visible.value = true
|
|
observer?.disconnect()
|
|
}
|
|
}, { threshold: 0.16 })
|
|
if (root.value) observer.observe(root.value)
|
|
})
|
|
|
|
onBeforeUnmount(() => observer?.disconnect())
|
|
</script>
|
|
|
|
<template>
|
|
<section ref="root" :class="['reveal-section', { visible }]">
|
|
<slot />
|
|
</section>
|
|
</template>
|