Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

200
Vistas
How refactor element class toggle function svelteKit

i generated an bottom sticky menu with svelteKit. When clicked an menu, its element toggling animate classes using animate.style library. Its working, how to refactor this code?

<script>
    import { getStores, navigating, page, session, updated } from '$app/stores';
    export let activeMenu;
    const animates = {'home': false, 'menu': false, 'profile': false, 'messages': false, 'notifications': false};

    function setAnimate(target){
        animates[target] = false;
        setTimeout(function(){
        animates[target] = true;
        }, 1000);
    }

    
</script>
<section class="w-100 bottom">
    <div class="elem {activeMenu === 'home' ? 'active' : ''}">
        <a class="{animates.home === true ? 'animate__animated animate__jello' : ''}" on:click={() => setAnimate('home')} href="/" title="Home"><span class="lnr lnr-home"></span></a>
    </div>
    <div class="elem {activeMenu === 'notifications' ? 'active' : ''}">
        <a class="{animates.notifications === true ? 'animate__animated animate__jello' : ''}" on:click={() => setAnimate('notifications')} title="Notifications"><span class="lnr lnr-alarm"></span></a>
    </div>
    <div class="elem {activeMenu === 'messages' ? 'active' : ''}">
        <a class="{animates.messages === true ? 'animate__animated animate__jello' : ''}" on:click={() => setAnimate('messages')} title="Home"><span class="lnr lnr-envelope"></span></a>
    </div>
    <div class="elem {activeMenu === 'profile' ? 'active' : ''}">
        <a class="{animates.profile === true ? 'animate__animated animate__jello' : ''}" on:click={() => setAnimate('profile')} href="/profile" title="Home"><span class="lnr lnr-user"></span></a>
    </div>
    <div class="elem {activeMenu === 'menu' ? 'active' : ''}">
        <a class="{animates.menu === true ? 'animate__animated animate__jello' : ''}" on:click={() => setAnimate('menu')} href="/menu" title="Home"><span class="lnr lnr-menu"></span></a>
    </div>
    
</section>
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda