fix: use WAAPI to control timing of JS-based animations

[Rich-Harris]

Follow-up to #12883.

Fixes #12730
Fixes #13019

Currently we assume that a transition can have a css method or a tick method but not both. #12883 allows both, but insists on at least one. In fact, we need to support all four cases — css, tick, css + tick and neither.

In #12883 (comment) I proposed always creating a task and putting the completion logic in there, but that's no good — we don't want to create a task if there's no tick method, because that would create extra power-consuming work.

This PR flips it on its head. Here, we always create a Web Animation, but we only provide it with keyframes if css is provided. If there's a tick method, the loop gets the current time from the animation, rather than from the requestAnimationFrame callback argument, and when the animation completes we call tick?.(t2, 1 - t2).

This gives us something I've wanted for a long time:

By using a primitive that the browser deeply understands, we can do stuff like slow the transition down using devtools, and without causing callbacks to be called prematurely — even when using JS transitions:

Screen.Recording.2024-08-24.at.9.46.11.PM.mov

Right now a bunch of tests fail. Since our test suite uses a bootleg Animation shim it's hard to tell which failures are legit (if any) and which just need some finagling — will look into it more tomorrow.

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: 51e3342

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Rich-Harris]

This could use some manual testing, but it feels quite a bit simpler than what we had before

[Rich-Harris]

Ok, this is way better than the status quo.

Svelte 4 — discontinuities all over the place when you start spamming the toggle button:

Screen.Recording.2024-08-26.at.10.03.14.PM.mov

Svelte 5 is somehow worse:

Screen.Recording.2024-08-26.at.10.04.27.PM.mov

This PR — smooth as butter, and of course you can use devtools to slow the animation down if you need to:

Screen.Recording.2024-08-26.at.10.05.36.PM.mov

[dummdidumm]

This is great! I have a hunch this might also fix #10717 (can't test it because all my monitors have the same refresh rate) (nope, doesn't fix it, because spring and tweened use loop on their own)

[dummdidumm]

This still needs a changeset and I had one question why a comment was removed, but code-wise it looks great