如何在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>

（Example）