Animation with delay can lead to outdated css rules

[Harald-1]

I played around with the todo list from the animation tutorial (https://svelte.dev/tutorial/animate) and adapted it like so:

• Distinguish between adding and removing/checking todos.
• For removing/checking todos, add a delay of 200ms to the animation, so it starts only after the transition has finished.
• For adding todos, start the animation directly (delay of 0ms)
  The result seems to work fine: https://svelte.dev/repl/fbcd977718ea4d70abde8adee151515d?version=3.4.2

Then I continued playing around and replaced the delay with an unreasonable huge number (3s). The behaviour seems very odd when you interact with the todo list before the animation actually starts, leaving the todo items on akward positions somewhere in between, where they should not be: https://svelte.dev/repl/31c4535d1e2c4a548ec55f6fc739facc?version=3.4.2
To reproduce, check and remove todos before the 3s delay.

After debugging the code I found out what the problem is:

1. When a delay is specified for a CSS animation, the css rule is created and applied with node.style.cssText.

   svelte/src/internal/animations.js

   Line 65 in 0891495

   if (css) node.style.cssText += css(0, 1);

2. Normally, when the animation would start after the delay a "named" rule would be created...
   

   svelte/src/internal/animations.js

   Line 30 in 0891495

   name = create_rule(node, 0, 1, duration, 0, easing, css);

   
   ...which could be deleted later.
   

   svelte/src/internal/animations.js

   Line 37 in 0891495

   if (css) delete_rule(node, name);

3. Since the user interacts with the items before the delay expires the rule created at 1) stays at the element and deleting it fails, because of the missing name.

I also found out, that there is a TODO here, which points out the solution:

svelte/src/internal/animations.js

Line 29 in 0891495

if (delay) node.style.cssText = css_text; // TODO create delayed animation instead?

I adapted animation.js accordingly - using animation-delay instead and will create a pull request to solve this issue shortly.
Still the items are on akward positions, but only until the delay expires. Then the items are repositioned automatically.

Note, that according to MDN, this will work only for IE10 or later: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

Thank you for the great work, Svelte is a cool thing! 👍😀

[Rich-Harris]

Released 3.4.4 with the partial fix, but will leave this open until we've squashed the starting position bug

[Harald-1]

Thank you for merging! I will have a look on it.

[Harald-1]

It took me a while to find a possible solution. The problem with the wrong starting position was a result of transition + animation. Please review pull-request #2904. Thank you!

[Harald-1]

Cleaned up the commit history, sorry for the clutter. 😁

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed as it was previously marked as stale and saw no subsequent activity.