Why multiple instances of same component as liquid-wormhole-element?

[danDanV1]

Why does liquid-wormhole insert my component twice while animating? as a complete duplicate with same id?

Is this by design? because it is creating some side effects with my component during animation.

<div id="ember2737" class="liquid-destination default-liquid-destination has-wormholes ember-view">
        <div class="liquid-destination-stack">
                <div id="ember2741" class="liquid-child ember-view" style="visibility: hidden;">
                        <div id="ember2744" class="ember-view">
                                <div id="ember2454" class="test-transition-selector h-full w-full fixed liquid-wormhole-element" style="visibility: hidden;">
                                <div id="ember2454" class="test-transition-selector h-full w-full fixed liquid-wormhole-element velocity-animating" style="position: absolute; top: 0px; left: 0px; margin: 0px; transform: translateY(595.305px);">
....
</div> closing divs etc.

Usage

{{#if isViewer}}
  {{#liquid-wormhole class="test-transition-selector h-full w-full fixed"}}
    {{my-component}}
  {{/liquid-wormhole}}
{{/if}}

[pzuraq]

While animating it does. Liquid-Fire in general actually does this, since it’s the easiest way to animate between two versions of things. I do think we can do better by updating to ember-animated, but I haven’t had time to work on this library for some time.

[danDanV1]

Hmm. Interesting. Perhaps in an older version of liquid-fire? I don't seen any DOM node cloning in the current version when inspecting a running route-change transition, or a brief search of the liquid-fire source code, but however I can see 'clone' used in the explode.js transition though.

In liquid-wormhole, I found the DOM element cloning occurs in wormhole.js, I just did a rough edit as follows and it works as expected animating the component without cloning and my previous mentioned sideeffects are gone as we're now animating the actual component.

Starting around line 46

    if (newWormholeElement.length > 0) {
     //const newChild = newWormholeElement.clone();
      const newChild = newWormholeElement;

      console.log("no cloning!~");

      //newWormholeElement.css({ visibility: "hidden" });
      //newWormholeElement.find(".liquid-child").css({ visibility: "hidden" });

      //const offset = newWormholeElement.offset();

      newChild.css({
        position: "absolute",
        //top: offset.top,
        //left: offset.left,
        bottom: "",
        right: "",
        margin: "0px",
        transform: ""
      });

      //newChild.appendTo(newWormholeElement.parent());
      this.newElement = newChild;
    }

However, I'm not sure how removal of the clone effects the oldelement statement further up in the code, as I've yet to be animating two elements (in and out) with this library yet.

[pzuraq]

Yeah, sorry, I didn't mean that Liquid Fire cloned elements, just that it has to animate between two versions of things. In ours, we don't actually want to always animate between two versions - consider the examples on the website where we are moving a single element around between two different positions. Liquid-Fire wasn't good at this at the time from what I remember, so this was my hack around it. It's been 3 years though so I may be forgetting things 😅

I definitely want to change it, so feel free to take a crack at removing it, happy to merge PRs!