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

[NullVoxPopuli]

trafficstars

I don't know if this is feasible yet, but i was just looking at svelte, and https://twitter.com/ankurpsinghal/status/1640842168288919552?s=20 It seems that they may have transition managers, much like how we have modifier managers, so different animation implementations could be built on top of that.

Why not use modifiers? Modifiers don't and can't block the removal of an element from the DOM.

Thoughts?

Examples:

• https://github.com/ankurrsinghal/svelte-legos/blob/master/src/lib/transitions/roll/index.ts
• https://github.com/ankurrsinghal/svelte-legos/blob/master/src/lib/transitions/slide/index.ts
• https://svelte.dev/tutorial/animate
• https://blog.logrocket.com/essential-transitions-and-animations-in-svelte/

Alternatively, if the modifier manager had an option for blocking removal, we could probably reuse more code. We would also need #883 for pre-paint timing, so animations could have a proper initial state

[miguelcobain]

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.

[lifeart]

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