CSS指令调用了不正确的类

Question

我正在尝试制作一个可折叠的侧边栏菜单，但目前它在页面重新加载时会闪烁打开和关闭。

问题代码似乎是导航中的这个CSS指令。

{on === true ? 'on' : 'off'}

我试过用几种方法更改CSS指令，但这些方法只在菜单打开时应用动画。所以我认为我误解了指令的工作原理。

class:on
on:click={() => on = !on}
{on ? "on":""}

下面是一个示例(有问题的代码在侧边栏选项卡中(：https://svelte.dev/repl/df5d44d97e614945aa06c7a9d9b9038f

HTML:

<aside class="absolute w-full h-full bg-gray-200 border-r-2 shadow-lg mobile-menu {on === true ? 'on' : 'off'}">
<nav>
<ul>
<li class="logo">
<a href="/">GPM</a>
</li>
<hr />
<li><a class="menu-items"href='.'>Index</a></li>
<li><a class="menu-items"href='about'>About</a></li>

</ul>
</nav>
</aside>

CSS：

.on {
animation-name: slide-on;
animation-duration: 0.3s; 
animation-direction: normal;
animation-timing-function: ease-in-out; 
animation-fill-mode: forwards; 
position: fixed;
}
@keyframes slide-on{
0% {
left: -100%;
transform: scale(1);
}
to{
left: 0;
transform: scale(1);
}
}
.off {
animation-name: slide-off;
animation-duration: 0.3s; 
animation-direction: normal; 
animation-timing-function: ease-in-out;
animation-fill-mode: forwards; 
}
@keyframes slide-off{
0% {
left: 0;
transform: scale(1);
}
99%{
left: -99%;
transform: scale(1);
}
100%{
left: -100%;
transform: scale(0);
}
}

Javascript：

export let on = false;

Answer 1

虽然另一个答案是正确的，即由于组件的初始状态，动画正在播放，但应该说，通过使用Svelte的内置转换，您可以极大地简化此代码。

在您的脚本标签中，导入飞行转换

import { fly } from 'svelte/transition';

用if块包裹整个侧边栏以完全隐藏/显示

{#if on}
<aside>...</aside>
{/if}

然后将飞行过渡应用到你的旁边：

<aside class="..." transition:fly={{x: -window.innerWidth }}>

然后就不需要所有这些css类了。

Answer 2

问题是您的侧边栏组件默认为类"off"，这会导致显示annimation。

我在这里提出了一个解决方案，只有当"on"变量为true时，才添加"off"类。可能有更好的解决方案，但这是可行的。

https://svelte.dev/repl/4afa7e650d1b41759426d7ad0998932f?version=3.37.0