CSS 指令调用不正确 class

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

问题是您的边栏组件默认使用 'off' 的 class，这会导致显示动画。

我在这里做了一个解决方案，如果 'on' 变量一直为真，则只添加 'off' class。可能有更好的解决方案，但这行得通。

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

Answer 2

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

在您的脚本标签中，导入飞行过渡

import { fly } from 'svelte/transition';

用 if 块将整个侧边栏包裹起来hide/show 完全

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

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

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

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

CSS 指令调用不正确 class

CSS Directive calling incorrect class

html

css

svelte