Как сделать анимацию меню в SvelteJS?

Question

Я хочу анимировать меню "Гамбургер" при нажатии, используя svelte.

Я хочу использовать анимацию этого меню на codepen .

Это код JavaScript:

$(document).ready(function(){
    $('#nav-icon1').click(function(){
        $(this).toggleClass('open');
    });
});

Как мне это сделать в svelte?

Answer 1

Вы можете использовать тот же CSS, вам нужна переменная для открытого состояния, например:

 <script>
    let open = false

    function handleClick(){
        open = !open
    }
</script>

HTML-шаблон может выглядеть следующим образом:

<div id="nav-icon1" class:open on:click={handleClick}>
  <span></span>
  <span></span>
  <span></span>
</div>

(Пример )