generé un menú pegajoso inferior con svelteKit. Cuando se hace clic en un menú, su elemento alterna clases animadas usando la biblioteca animate.style. Está funcionando, ¿cómo refactorizar este código?

 <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>