Transition: Don't animate height
All checks were successful
continuous-integration/drone/push Build is passing

So use a background div to squeeze and move other elements as well
This commit is contained in:
2020-03-11 18:33:35 +01:00
parent b61bb805e8
commit 761bfa7486
3 changed files with 65 additions and 31 deletions

View File

@@ -24,16 +24,18 @@
let firstLoad = true
// 1. Watch page change
page.subscribe(() => {
// Run the loader animation (only after first load)
if (!firstLoad && process.browser) {
animateIn(scope)
page.subscribe(page => {
if (!page.params.photo) {
// Run the loader animation (only after first load)
if (!firstLoad && process.browser) {
animateIn(scope)
}
// TODO: Figure out how to delay the page rendering a little bit before the end of the transition panel ending
// Set pageReady to false (?)
pageReady.set(false)
}
// TODO: Figure out how to delay the page rendering a little bit before the end of the transition panel ending
// Set pageReady to false (?)
pageReady.set(false)
})
// 2. Watch when loaded changes
@@ -60,7 +62,7 @@
</script>
<div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
<div class="loader">
<div class="transition__loader">
{#if firstLoad}
<TitleSite />
@@ -68,4 +70,5 @@
<IconGlobe width="44" color="#fff" animated="true" />
{/if}
</div>
<div class="transition__background" />
</div>