Incorrect child animation when parent element is CSS-translated before auto-animate ref is animated

[SBrudi2801]

Description:
When the ref used by auto-animate is embedded inside an element that was previously moved using a CSS transition (e.g., transform: translate), auto-animate does not correctly recognize the current position of the children. This results in incorrect animations: instead of simply fading out (or hiding), the children also shift position unexpectedly.

Reproduction:
You can reproduce the issue here:
https://codesandbox.io/p/sandbox/65nvyv

Steps:

Open the menu (parent element moves using CSS transition).

Click 'Hide Children'.

The children animate incorrectly – they don’t just disappear, but also move from an unintended position.

Any following hide and show (without animating the menu) actions are animated correctly.

Expected behavior:
The children should only animate according to their intended show/hide transition. Their position should not be affected by previous CSS transforms on the parent.

Actual behavior:
The children’s position is calculated incorrectly after the parent’s CSS transition, causing them to shift before fading out.

Environment:

auto-animate version: 0.9.0

Browser: Chrome Version 139.0.7258.155 (Offizieller Build) (arm64)

Framework: React

Additional context:
This issue occurs specifically when the parent has been moved with a CSS transition before toggling the children.

[weijarz]

I encountered the same issue. I disabled animations when the list is on the right side of the screen and enabled them when sliding into view, but the list items incorrectly applied the sliding-in effect from the right side of the screen. It appears that list items remember their position at the time of creation, regardless of whether animations have been disabled.