Svelte 3.55：过渡动画开始时如何立即切换CSS类？

直接通过响应式状态控制Dimmer的点击事件权限，无需依赖过渡事件或延迟的类添加：

方案一：动态样式绑定（推荐） #

移除所有isFading相关逻辑，用style:pointer-events直接绑定isOpen状态，在侧栏开始关闭的瞬间立即禁用Dimmer的点击事件：

<script lang="ts">
  import { fade } from 'svelte/transition'
  import { isSidebarOpen, toggleSidebar } from '../state'

  let isOpen: boolean = false

  isSidebarOpen.subscribe((value) => (isOpen = value))
</script>

<div class="sidebar">
  {#if isOpen}
    <div
      class="sidebar__dimmer"
      on:click={toggleSidebar}
      style:pointer-events={isOpen ? 'all' : 'none'}
      transition:fade={{ duration: 500 }}
    />
  {/if}
  <div>Lorem ipsum dolor sit amet</div>
</div>

<style lang="scss" scoped>
  .sidebar {
    z-index: 9999;
    position: fixed;
    inset: 0;
    display: flex;
    overflow: hidden;
    pointer-events: none;

    &__dimmer {
      position: absolute;
      inset: 0;
      /* 移除原有的pointer-events: all，由动态样式接管 */
    }
  }
</style>

原理 #

当isOpen从true切换为false时，响应式样式绑定会立即将pointer-events设为none，Dimmer瞬间失去点击交互能力，完全避免了动画过程中的误触问题，比依赖outrostart事件更高效。

方案二：即时类绑定 #

如果坚持使用类的方式，直接将isFading类与!isOpen状态绑定，状态变化时类会立即生效：

<script lang="ts">
  import { fade } from 'svelte/transition'
  import { isSidebarOpen, toggleSidebar } from '../state'

  let isOpen: boolean = false

  isSidebarOpen.subscribe((value) => (isOpen = value))
</script>

<div class="sidebar">
  {#if isOpen}
    <div
      class="sidebar__dimmer"
      class:isFading={!isOpen}
      on:click={toggleSidebar}
      transition:fade={{ duration: 500 }}
    />
  {/if}
  <div>Lorem ipsum dolor sit amet</div>
</div>

<style lang="scss" scoped>
  .sidebar {
    z-index: 9999;
    position: fixed;
    inset: 0;
    display: flex;
    overflow: hidden;
    pointer-events: none;

    &__dimmer {
      position: absolute;
      inset: 0;
      pointer-events: all;
    }

    &__dimmer.isFading {
      pointer-events: none;
    }
  }
</style>

原理 #

!isOpen的状态变化会触发类的即时更新，无需等待过渡事件，彻底解决类添加延迟的问题。

内容的提问来源于stack exchange，提问作者Arcyvilk