⚠️ 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:
2020-04-03 22:53:43 +02:00
parent 76e2f8242e
commit 7e0d1e33fb
21 changed files with 300 additions and 315 deletions

View File

@@ -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>