Comments (8)
I think better to do this on template level (based on IncrementalDOM). So I close the issue.
from incremental-dom.
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?
from incremental-dom.
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:
- 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
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+.
from incremental-dom.
Created an proof of concept using MutationObserver
: sparhami@1464b59
from incremental-dom.
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?
from incremental-dom.
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.
from incremental-dom.
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.
from incremental-dom.
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?
from incremental-dom.
Related Issues (20)
- Element Events list HOT 2
- Is Angular 8 Ivy render engine going to effectively replace this project? HOT 2
- Ignoring certain attributes HOT 6
- Update dependencies to remove security warnings
- Extended custom element creation HOT 5
- Issues with webpack and babel HOT 3
- Document: `elementVoid` is incorrect. HOT 2
- Setting prop using Boolean (to trigger prop over attribute) always sets true HOT 7
- DocumentFragment support HOT 5
- Create function loses content HOT 2
- [Performance Advice] Patching to single element or custom elements HOT 16
- Runnable in jsdom (server side rendering)
- Add a module build HOT 2
- Twing implementation HOT 6
- Relationship to Lit / Polymer? HOT 5
- Do not publish ts sources to npm HOT 4
- CDN version not up to date. HOT 2
- Test not launching on macOS 11.2 / Chrome 89
- Details disclosure element <details> adds and removes "open" attribute outside of incrementalDOM HOT 2
- [Performance Advice] `key` parameter for `text()` function
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from incremental-dom.