Skip to content

Svelte 5: onanimationend event doesn't get called under these specific circumstances. #11777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
HighFunctioningSociopathSH opened this issue May 25, 2024 · 1 comment · Fixed by #11783

Comments

@HighFunctioningSociopathSH

Describe the bug

After updating to [email protected], I noticed that the animations of my component don't work properly anymore and found out that my onanimationend event is not getting triggered. After a considerable amount of searching I found out that under the following conditions, the onanimationend event doesn't trigger.

Reproduction

Test.svelte

<script lang="ts">
  import "./styles.scss";
  let { ...restProps } = $props();
</script>

<span
  {...restProps}
  class="test"
  ontransitionend={(e) => {
    // content doesn't matter
  }}
  onanimationend={(e) => {
    console.log("called");
  }}
>
</span>

styles.css

.test {
  width: 10rem;
  height: 10rem;
  background-color: red;
  display: inline-block;
  @keyframes test-animation {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  animation: test-animation 2s linear forwards;
}

+page.svelte

<script lang="ts">
  import Test from "$components/Test/Test.svelte";
</script>

<Test></Test>

Try removing the restProps spread and you will see that the onanimationend event gets called. you can do the same thing for ontransitionend and witness that again the onanimationend event gets called. Only when both the {...restProps} and ontransitionend props are present, the onanimationend event is ignored. I'm not sure if this only happens for these events or if other things can also cause the same issue. All I can say for sure is that this issue wasn't present in [email protected]

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 5.18 GB / 15.63 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.3 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: ^5.0.0-next.141 => 5.0.0-next.141

Severity

blocking an upgrade

@FoHoOV
Copy link
Contributor

FoHoOV commented May 25, 2024

here is simpler demo. It seems its not about the props, just any spearding causes this issue.

dummdidumm pushed a commit that referenced this issue May 27, 2024
fixes #11777
We need to scope the `key` variable because it may be captured in a closure
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants