Svelte中on:animationend无法访问bind:this变量（返回undefined）

以下是针对你遇到的问题的具体解决方案，覆盖常见触发场景：

1. 为每个子组件分配独立的绑定变量 #

在each循环批量渲染子组件时，不能将所有子组件的bind:this绑定到同一个变量上，必须为每个实例分配独立的存储位置（比如数组的对应索引）。示例代码：

<script>
  let items = Array.from({length: 5}, (_, i) => i);
  // 用数组存储每个子组件的DOM元素引用
  let childDivs = [];

  function doStuff(element) {
    if (!element) return;
    // 这里执行你的元素操作逻辑
    console.log('元素宽度:', element.offsetWidth);
  }
</script>

{#each items as item, index}
  <Child 
    bind:this={childDivs[index]}
    on:animationend={() => doStuff(childDivs[index])}
    style="--animation-delay: {index * 0.2}s"
  />
{/each}

2. 精准过滤目标动画事件 #

动画结束事件可能会冒泡触发，或者元素上存在多个动画，导致事件触发时目标元素的绑定尚未完成。通过判断动画名称和事件源来确保只处理目标入场动画：

<!-- Child.svelte -->
<script>
  export let thisDiv;
  function doStuff() {
    if (!thisDiv) return;
    // 执行操作
  }
</script>

<div 
  bind:this={thisDiv}
  on:animationend={(e) => {
    // 确保事件来自当前元素，且是目标入场动画
    if (e.target === e.currentTarget && e.animationName === 'fade-in') {
      doStuff();
    }
  }}
  class="child-element"
>
  子组件内容
</div>

<style>
  .child-element {
    opacity: 0;
    animation: fade-in 0.5s var(--animation-delay) forwards;
  }
  @keyframes fade-in {
    to { opacity: 1; }
  }
</style>

3. 确保循环key的稳定性 #

如果each循环使用index作为key，当数组内容变化时，子组件可能会被重新渲染，导致bind:this的引用被重置。改用数组项的唯一标识作为key：

{#each items as item (item.id)}
  <Child 
    bind:this={childDivs[item.id]}
    on:animationend={() => doStuff(childDivs[item.id])}
  />
{/each}

4. 用onMount兜底绑定事件 #

如果上述方法无效，可以在子组件内部通过onMount钩子，确保元素挂载后再监听动画事件：

<!-- Child.svelte -->
<script>
  import { onMount } from 'svelte';
  let thisDiv;

  function doStuff() {
    if (!thisDiv) return;
    // 执行元素操作
  }

  onMount(() => {
    const handleAnimationEnd = (e) => {
      if (e.animationName === 'fade-in') {
        doStuff();
        // 移除事件监听，避免内存泄漏
        thisDiv.removeEventListener('animationend', handleAnimationEnd);
      }
    };

    if (thisDiv) {
      thisDiv.addEventListener('animationend', handleAnimationEnd);
    }
  });
</script>

<div bind:this={thisDiv} class="child-element">...</div>

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