CODEWITHSUNDEEP
statesveltesveltekit
Tithos
Tithos

Reputation: 1437

How do I detect change Sveltekit state

I am trying to add a class to an element in one component (nav) when an animation in a different component (logo) ends. In my $lib/Logo.svelte file I have the following code:

<script>
    import { onMount } from 'svelte';
    import { isLogoAnimationEnded } from './stores';

    onMount(() => {
        const body = document.querySelector('body');
        const h1 = document.querySelector('.name');

        h1?.addEventListener('animationend', () => {
            isLogoAnimationEnded.update((n) => (n = true));
            console.log($isLogoAnimationEnded);
            body?.classList.add('shake');
        });

        return () => {
            h1?.removeEventListener('animationend', () => {
                isLogoAnimationEnded.set(false);
                body?.classList.remove('shake');
            });
        };
    });
</script>

<div class="logo-wrapper">
    <h1 class="name">Tim Smith</h1>
    <p class="title">Full Stack Web Engineer</p>
</div>

<style>
  ...
</style>

My

store is defined in $lib/stores.js:

import { writable } from 'svelte/store';

export const isLogoAnimationEnded = writable(false);

What I am trying to do is listen for a change in isLogoAnimationEnded in $lib/Nav.svelte and add a class to nav when isLogoAnimationEnded becomes true.

<script lang="ts">
    import { onMount } from 'svelte';
    import { isLogoAnimationEnded } from './stores';

    let nav;

    onMount(() => {
        nav = document.querySelector('nav');
        console.log('nav', nav);
    });

    if ($isLogoAnimationEnded) {
        nav?.classList.add('fly-down');
    }
</script>

<div class="nav-wrapper">
    <nav aria-label="Main">
        <ul>
            <li><a href="/about">About</a></li>
            <li><a href="/projects">Projects</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</div>

<style>
  ...
</style>

My current setup does not work. Please help.

Upvotes: 0

Views: 1298

Answers (1)

Kutay G&#252;ler
Kutay G&#252;ler

Reputation: 44

The code below is only going to run once

if ($isLogoAnimationEnded) {
    nav?.classList.add('fly-down');
}

So I would delete it and write the class attribute on nav element like this:

<nav class={$isLogoAnimationEnded ? "fly-down" : ""} aria-label="Main">

This also gets rid of the onMount, nav variable and querySelector

Upvotes: 2

Related Questions