new primitive: transition, similar to modifiers, except they block certain render events #921

Activity

1. miguelcobain commented on Mar 29, 2023

   

   miguelcobain

   on Mar 29, 2023

   Contributor

   More actions

   Big yes to this. Ember needs more useful primitives for animation.

   ember-css-transitions approach to animating out an element is to clone it. That often works fine, but sometimes it opens up all kinds of problems.
   One example where I've seen it break is when the elements to be cloned have web-components, for example. Basically, cloning the DOM might have side-effects that you might not want. Also, it's probably expensive to do.

   👍React with 👍3Reacted by Jarek Radosz, Alex Kanunnikov and Ryan Panning
2. lifeart commented on Aug 4, 2023

   

   lifeart

   on Aug 4, 2023

   Last edited by lifeart

   More actions

   We may have "poc" with modifier and glimmer opcode removal patch https://github.com/glimmerjs/glimmer-vm/blob/664a746b3baf82221c5874a759279d1afdd41e5b/packages/%40glimmer/runtime/lib/vm/element-builder.ts#L474C5-L474C12
   Once modifier is installed, we adding node to AnimationMap, and once it's going to be removed (modifier uninstall), we could add additional removal logic into set.

   And patched glimmer-vm logic may look into this set, and compare current node to remove with AnimationSet, and skip/delay removal.

   Sample removal patch:

   modifier logic:

   window.AnimationMap = new WeakMap();
   
   function animationModifier(element) {
        window.AnimationMap.add(element, async function() {
          await anyElementTransition();
        });
   }

   sample glimmer remove opcode:

   export function removeElement(element) {
     if (window.AnimationMap.has(element)) {
      const instructions = window.AnimationMap.get(element);
      instructions(element).finally(()=>{
        element.parentNode.removeChild(element);
      });
     } else {
      element.parentNode.removeChild(element);
    }
   }

   Since glimmer removing nodes inside-out, we may need to check for every node.parentNode to be in window.AnimationMap

   👀React with 👀1Reacted by Ivan Arroyo Escobar