Only listen to target element CSS events.

[minht11]

Imagine you have a button which toggles transition on click, something like this:

<Transition>
  <div id='animated-container'> // This has animation of 300ms
      <button /> // This button has background transition of 100ms on hover
    </div>
<Transition>

Since button transition finishes first these listeners inside cssExit will catch it and remove element from DOM despite the fact that main animation is still running.

solid-flip/src/helpers.ts

Lines 199 to 200 in 4361a60

	el.addEventListener('transitionend', removeEls, { once: true });
	el.addEventListener('animationend', removeEls, { once: true });

A solution for that is to check if event target is the container and not one of the children.

[otonashixav]

Thanks for reporting. Should be fixed by 0b275bf; I've published the fixed version.

[minht11]

Thanks latest version works as expected.

[minht11]

The 0.7.0 version reintroduced this bug.
From MDN:

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

currentTarget only returns element which has an event listener attached to it and not an actual element that fired an event. So if child button fires a transition event, solid-flip thinks that an actual parent element already finished animating and removes it.

solid-flip/src/integrations.ts

Lines 210 to 211 in 6ed9c1c

	const handleEvent = ({ currentTarget }: Event) => {
	if (currentTarget !== el) return;

[otonashixav]

Fixed in 0.7.3.