Add support for deferred removal of DOM-elements

[jhsware]

To perform animations on unmount one currently has to make a clone of the elements belonging to a component. This adds orphan DOM-nodes and requires the animation library to perform cleanup. I have used this technique in https://github.com/jhsware/inferno-animation

It would be great if one on componentWillUnmount could mark the component for deferred removal, perform the animation and then trigger the removal when the animation is done.

componentWillUnmount () {
  this._deferredDOMRemoval = true
  this.doAnimationOnRemove()
}

doAnimationOnRemove () {
  // Perform a beautiful CSS-animation
  this.ref.addEventListener("transitionend", (e) => {
    // Now tell Inferno to remove the DOM-node
    this._removeDOM()
  }, false)
}

[Havunen]

There is easier way to accomplish this, Simply do setState before you are removing the element. Then use the state to mark element fe. class "removing" do animation using CSS and then after x amount of time do the actual removal.

But I agree, it would be nice to have library for this, when used with pure JS animations. Maybe somebody could create plugin?

[thysultan]

Related issue #1204

[jhsware]

@Havunen To use the setState approach you need to control the animation from the parent element. But with deferred removal the actual component could do all the work regardless of the parent. This makes for nicer application code because you don't need a wrapper. It would work both for CSS-animations and JS-animations.

[jhsware]

Work in progress https://github.com/jhsware/inferno/tree/animation-hooks