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

Question

我想使用 svelte 在单击时为“汉堡”菜单制作动画。

我想在codepen上使用这个菜单动画。

这是 JavaScript 代码：

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

我将如何以苗条的方式做到这一点？

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>

（例子）