flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

⚠️ Rework completely how transitions works

Browse Source 
- 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:
Félix Péault
2020-04-03 22:53:43 +02:00
parent 76e2f8242e
commit 7e0d1e33fb
21 changed files with 300 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/routes/credits.svelte
View File

@@ -1,7 +1,7 @@
<script>
import { onMount } from 'svelte'
import { stores } from '@sapper/app'
import { site, pageReady, pageTransition } from 'utils/store'
import { site, pageReady } from 'utils/store'
// Components
import IconArrow from 'atoms/IconArrow'
@@ -10,10 +10,10 @@
import InteractiveGlobe from 'molecules/InteractiveGlobe'
import Footer from 'organisms/Footer'
import SocialMetas from 'utils/SocialMetas'
import Transition from 'utils/Transition'
// Animations
import { animateIn } from 'animations/page'
pageTransition.onAnimationEnd = animateIn
// Variables
const { page } = stores()
@@ -39,45 +39,47 @@
/>
</svelte:head>
<section class="page">
<div class="wrap">
<div class="page__top page__part">
<a href="/" class="button-control button-control--pink dir-left">
<IconArrow direction="left" color="#fff" class="icon" />
<IconArrow direction="left" color="#fff" class="icon" hidden="true" />
</a>
<Transition>
<section class="page">
<div class="wrap">
<div class="page__top page__part">
<a href="/" class="button-control button-control--pink dir-left">
<IconArrow direction="left" color="#fff" class="icon" />
<IconArrow direction="left" color="#fff" class="icon" hidden="true" />
</a>
<TitleSite />
</div>
<TitleSite />
</div>
<div class="page__description page__part style-description">
<p>{$site.credits_text}</p>
</div>
<div class="page__description page__part style-description">
<p>{$site.credits_text}</p>
</div>
{#if $site.credits_list}
<div class="page__list page__part">
{#each $site.credits_list as { title, credits }}
<div class="page__category">
<h2 class="title-category">{title}</h2>
{#each credits as { name, role, website }, i}
<dl>
<dt class="style-location">
{#if website}
<LinkTranslate href={website} text={name} target="_blank" rel="noopener" />
{:else}
{name}
{/if}
</dt>
<dd class="style-caps style-caps style-caps--transparent">{role}</dd>
</dl>
{#if $site.credits_list}
<div class="page__list page__part">
{#each $site.credits_list as { title, credits }}
<div class="page__category">
<h2 class="title-category">{title}</h2>
{#each credits as { name, role, website }, i}
<dl>
<dt class="style-location">
{#if website}
<LinkTranslate href={website} text={name} target="_blank" rel="noopener" />
{:else}
{name}
{/if}
</dt>
<dd class="style-caps style-caps style-caps--transparent">{role}</dd>
</dl>
{/each}
</div>
{/each}
</div>
{/each}
{/if}
</div>
{/if}
</div>
<InteractiveGlobe type="part" />
<InteractiveGlobe type="part" />
<Footer />
</section>
<Footer />
</section>
</Transition>