WIP

packages/svelte/src/internal/client/dom/blocks/each.js

@@ -598,7 +598,9 @@ function create_item(anchor, prev, value, key, index, render_fn, flags, get_coll
 		i,
 		v,
 		k: key,
-		a: null,
+		get a() {
+			return item.e.nodes && item.e.nodes.a;
+		},
 		// @ts-expect-error
 		e: null,
 		o: false,

packages/svelte/src/internal/client/dom/blocks/svelte-element.js

@@ -18,6 +18,7 @@ import { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';
 import { assign_nodes } from '../template.js';
 import { is_raw_text_element } from '../../../../utils.js';
 import { BranchManager } from './branches.js';
+import { set_animation_effect_override } from '../elements/transitions.js';
 
 /**
  * @param {Comment | Element} node
@@ -48,11 +49,10 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 	var anchor = /** @type {TemplateNode} */ (hydrating ? hydrate_node : node);
 
 	/**
-	 * The keyed `{#each ...}` item block, if any, that this element is inside.
 	 * We track this so we can set it when changing the element, allowing any
 	 * `animate:` directive to bind itself to the correct block
 	 */
-	var each_item_block = current_each_item;
+	var parent_effect = /** @type {Effect} */ (active_effect);
 
 	var branches = new BranchManager(anchor, false);
 
@@ -67,10 +67,6 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 		}
 
 		branches.ensure(next_tag, (anchor) => {
-			// See explanation of `each_item_block` above
-			var previous_each_item = current_each_item;
-			set_current_each_item(each_item_block);
-
 			if (next_tag) {
 				element = hydrating
 					? /** @type {Element} */ (element)
@@ -112,11 +108,15 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 						}
 					}
 
+					set_animation_effect_override(parent_effect);
+
 					// `child_anchor` is undefined if this is a void element, but we still
 					// need to call `render_fn` in order to run actions etc. If the element
 					// contains children, it's a user error (which is warned on elsewhere)
 					// and the DOM will be silently discarded
 					render_fn(element, child_anchor);
+
+					set_animation_effect_override(null);
 				}
 
 				// we do this after calling `render_fn` so that child effects don't override `nodes.end`
@@ -125,8 +125,6 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 				anchor.before(element);
 			}
 
-			set_current_each_item(previous_each_item);
-
 			if (hydrating) {
 				set_hydrate_node(anchor);
 			}

packages/svelte/src/internal/client/dom/elements/transitions.js

@@ -66,6 +66,14 @@ function css_to_keyframe(css) {
 /** @param {number} t */
 const linear = (t) => t;
 
+/** @type {Effect | null} */
+let animation_effect_override = null;
+
+/** @param {Effect | null} v */
+export function set_animation_effect_override(v) {
+	animation_effect_override = v;
+}
+
 /**
  * Called inside keyed `{#each ...}` blocks (as `$.animation(...)`). This creates an animation manager
  * and attaches it to the block, so that moves can be animated following reconciliation.
@@ -75,7 +83,8 @@ const linear = (t) => t;
  * @param {(() => P) | null} get_params
  */
 export function animation(element, get_fn, get_params) {
-	var item = /** @type {EachItem} */ (current_each_item);
+	var effect = animation_effect_override ?? /** @type {Effect} */ (active_effect);
+	var nodes = /** @type {EffectNodes} */ (effect.nodes);
 
 	/** @type {DOMRect} */
 	var from;
@@ -89,7 +98,7 @@ export function animation(element, get_fn, get_params) {
 	/** @type {null | { position: string, width: string, height: string, transform: string }} */
 	var original_styles = null;
 
-	item.a ??= {
+	nodes.a ??= {
 		element,
 		measure() {
 			from = this.element.getBoundingClientRect();
@@ -161,7 +170,7 @@ export function animation(element, get_fn, get_params) {
 	// when an animation manager already exists, if the tag changes. in that case, we need to
 	// swap out the element rather than creating a new manager, in case it happened at the same
 	// moment as a reconciliation
-	item.a.element = element;
+	nodes.a.element = element;
 }
 
 /**