react-flip-toolkit-router-example
react-flip-toolkit-router-example copied to clipboard
Understand properly behavior of `onExit` and `onAppear` callback
First, thank you for this awesome library. I am playing with the core version of it but I don't understand a particular behavior, I have these flipped elements, and want to animate the opacity to 0 when one element leaves the DOM.
The "problem" is that when the element is being re-inserted in the DOM, it has the opacity set to 0. Do the library cache the element before removing it?
let el = document.querySelectorAll("figure").forEach((f, i) => {
flipper.addFlipped({
element: f,
flipId: "square" + i,
onStart: () => console.log("animation started!"),
onComplete: () => console.log("animation completed!")
onExit: (el, i, remove) => {
snabbt(el, {
opacity: 0,
ease: "tween",
fromOpacity: 1,
complete: () => {
console.log("animation completed2", el);
remove();
}
});
}
});
});
Hi, the opacity should only be set to 0 if there is anonAppear
callback provided. (If you don't want this, you can also take over the enter/update/delete cycle with the function handleEnterUpdateDelete
Since it doesn't seem from your code that you provided an onAppear
callback, something must be going wrong. I'll try to make some test cases tonight and check it out.