⚠️ Rework completely how transitions works
- Use Svelte/Sapper native if and transitions to show either the page content or the loader, then load each page animationIn - Code is safe on SSR side, using process.browser on this if - The <main> element is on position absolute to fade nicely the different pages - Code cleaning
This commit is contained in:
@@ -6,28 +6,30 @@
|
||||
import { animateIn } from 'animations/TitleSite'
|
||||
|
||||
// Props and variables
|
||||
export let init = false
|
||||
let scope
|
||||
let mounted = false
|
||||
let scope
|
||||
|
||||
|
||||
/*
|
||||
** Run code on component mount
|
||||
** Run code when mounted
|
||||
*/
|
||||
onMount(() => {
|
||||
animateIn(scope, init)
|
||||
animateIn(scope)
|
||||
mounted = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="title-location title-location--inline" bind:this={scope} style="opacity: {mounted ? 1 : 0}">
|
||||
<div class="title-location title-location--inline"
|
||||
bind:this={scope}
|
||||
style="opacity: {mounted ? 1 : 0}"
|
||||
>
|
||||
<div role="heading" aria-level="1" aria-label="Houses">
|
||||
<div class="anim-mask">
|
||||
{@html charsToSpan('Houses')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<em>
|
||||
<em class="anim-mask">
|
||||
<span>of</span>
|
||||
<span>the</span>
|
||||
</em>
|
||||
|
||||
Reference in New Issue
Block a user