react-flip-toolkit-router-example icon indicating copy to clipboard operation
react-flip-toolkit-router-example copied to clipboard

Understand properly behavior of `onExit` and `onAppear` callback

Open ciaoben opened this issue 6 years ago • 1 comments

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();
                 }
               });
             }
          });
        });

ciaoben avatar Nov 26 '18 15:11 ciaoben

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.

aholachek avatar Nov 26 '18 23:11 aholachek