google / incremental-dom

An in-place DOM diffing library
http://google.github.io/incremental-dom/
Apache License 2.0
3.54k stars 180 forks source link

Animation support? #188

Open askorik opened 8 years ago

askorik commented 8 years ago

Hi, do you have any plans for animation support (for node removal/insertion)? Some methods which can be used for such purpose? Or maybe you have some ideas how to animate nodes removal during the patch?

askorik commented 8 years ago

I think better to do this on template level (based on IncrementalDOM). So I close the issue.

mitar commented 8 years ago

I would reopen this issue because this is also my question. How can one use animations with incremental DOM where you want to maybe move components inside a list in slow motion to a new position in the list?

sparhami commented 8 years ago

I looked at a library written in React that does this to see how they approached it. At a high level, it seems like their approach is to:

  1. Let the DOM node move due to the re-order
  2. Compare the old location with the new location
  3. Offset the element immediately so it goes back to its old location
  4. Animate the DOM node to its new location

Seems like you could use a MutationObserver for the change notifications then do the same sort of thing. The only thing I'm not certain about is if the batching of mutation records would mean that the user sees the DOM node in the new state before you are able to offset it back to the previous state. In the future, encapsulating this logic into a web component seems ideal.

Without MutationObserver, the missing piece is that Incremental DOM doesn't currently notify on DOM node movement, only creation and final removal. Notifying globally on movement probably isn't too useful without a component framework to notify the responsible piece of the UI about the movement. Unfortunately, MutationObserver requires IE11+.

sparhami commented 8 years ago

Created an proof of concept using MutationObserver: https://github.com/sparhami/incremental-dom/commit/1464b59613b74235ef9a7a3e6fc7de7510baaf43

mitar commented 8 years ago

Let the DOM node move due to the re-order Compare the old location with the new location Offset the element immediately so it goes back to its old location Animate the DOM node to its new location

Yes, this is a general way how you would animate this. But the question is if this is something incremental DOM would support.

I also worry that MutationObserver would provide a potential lag. Maybe there should be some post-insertion, post-move, post-removal hooks one could hook into for a particular change?

mitar commented 8 years ago

Notifying globally on movement probably isn't too useful without a component framework to notify the responsible piece of the UI about the movement.

Yes, but just having incremental DOM for this would then allow others to build upon. Currently, you cannot really build upon this.

sparhami commented 8 years ago

I also worry that MutationObserver would provide a potential lag. Maybe there should be some post-insertion, post-move, post-removal hooks one could hook into for a particular change?

So looking at the spec, the mutation callback is done as microtask, which would be after any other JavaScript, but before the end of the event loop. This would be before layout, so there never will be a lag.

Yes, but just having incremental DOM for this would then allow others to build upon. Currently, you cannot really build upon this.

Well, for IE9/10. For IE11+, MutationObserver covers you. Would have to look at it and how to minimize impact (code size, performance) for people not using this feature.

mitar commented 8 years ago

Would have to look at it and how to minimize impact (code size, performance) for people not using this feature.

One check to see if a callback function is provided is probably not so expensive?