'Sveltekit, flashing element before transitioning

I want to fade in an element using a javascript tween library. When loading the Sveltekit page for the first time, the DOM elements I want to animate flashes for brief moment before onMount kicks in and I can hide it with javascript, and tween it like I want.

This flashing effect is not desired.

It is possible to hide this with using the following code:

<script>
  import { onMount } from 'svelte';

  let ready = false;
  onMount(() => ready = true);
</script>

<div class="always-visible">
  {#if ready}
    <div class="visible-on-mount">...</div>
  {/if}
</div>

But this will hide the content permanent if the browser does not support javascript. I want the content to appear when javascript is not available.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source