如何在 SvelteJS 中制作菜单动画？

Question

我想使用 svelte 在单击时为 "Hamburger" 菜单制作动画。

我想在 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>

How to do menu animation in SvelteJS?