Comments (13)
Here's my thoughts on animation:
Simple callbacks are good; it forces the user to implement their animation logic. Since there are so many ways of doing animation (tweening, integration, hybrid approach, etc) it should not be baked into the framework.
Some real-world challenges we have faced, and which tend to be difficult with most frameworks:
- animating one thing based on the completion of several animations; e.g. all buttons in a sidebar animate out, then the sidebar can animate out
- animations that are dependent on application state or previous route; e.g. sometimes when going from X to Y, different delays or durations lead to better UX
- overriding animations; user quickly clicks X -> Y -> X -> Y, with a traditional tween/callback approach this can cause problems
- overlapping transitions: e.g. button slides model text from "Next" to "OK" but for a brief period both labels are visible within the button container; or more complex: cross-fading between routes
from deku.
animating one thing based on the completion of several animations; e.g. all buttons in a sidebar animate out, then the sidebar can animate out
If we were able to manually animate out elements using beforeUnmount
you'd need to block all parent components from unmounting. This could work but it's definitely tricky and could cause a whole lot of other issues. Like, if a render gets triggered again and it's not expecting an element to be there but it is then 💥
overlapping transitions: e.g. button slides model text from "Next" to "OK" but for a brief period both labels are visible within the button container; or more complex: cross-fading between routes
This is a tough one I seen using "sheet" modals. When it's sliding off the page to hide, the content inside of it might have been removed by the diff, so the sheet is empty.
From what I can tell it's mostly just entering/leaving animations that are the main problem for UI. If we were to say we weren't going to try and cover every animation use-case and focus on animations for UI it might be easier too.
from deku.
Animation = state change middleware
from deku.
They are interactive. They are user targetes language. They dont make components unusable. Especially with the completely unstandardised rangr of dependencies. They are often dirty and make no sence in the dom tree.
However.. The catch is that they are high level interactions on really low level details.
You wrote a component DOM selector. I think all animations should go in a compiled CSS-like tween file.
Another thought, tweening can benefit from using a generator instead of a tween fn.
from deku.
I think layers of semanticly appripriate expressiveness are required.
from deku.
How about, streams. :)
Jsdaily email:
Because each document only has a single template element, it means that any associated stylesheets are "namespaced" to that component. This means CSS doesn't bleed over to other components. This level of encapsulation is important because components work best when they're highly self-contained. I'm not sure if Adam is advocating using standard CSS over React-Style -- the stylesheets in JavaScript approach has some advantages, but I believe Maple's approach will be more accessible to Polymer developers.
from deku.
Anyways, I think we might like these
https://github.com/yoshuawuyts/fsm-event
from deku.
Sorry: fsm event was the wrong link. Sorry for shotgunning my thoughts a little.
https://github.com/paldepind/flyd
or
https://github.com/ubolonton/js-csp
from deku.
Hi @anthonyshort how are you!
What is the status of this feature?
from deku.
What's the status on this? A done callback would be perfect, at least while a better solution pops up.
from deku.
The callback is a difficult one to implement, as you need to block any other UI updates from happening at the same time. We wouldn't be able to run the diff again until it all of the unmount callbacks are done. I think the solution would be to do something like React Motion, a meta-component controls whether a child node exists or not.
Here's a presentation on the various ways it can be handled with React https://speakerdeck.com/vjeux/react-rally-animated-react-performance-toolbox. It's possible to implement the data-bound solution at the end with Deku now using afterRender
.
from deku.
Looks like an interesting approach. Are you considering making this a part of Deku, or a plugin? Any chance I could get an example of the data-bound approach? Thanks.
from deku.
react-bootstrap are using Transition component in collapse component. final resault work so good. Maybe deku can get idea from this components.
from deku.
Related Issues (20)
- A hard problem in the absence of context HOT 6
- State change triggered in `onRemove` method does not get rendered
- Hot module replacement docs are out of date
- "jsnext:main" in package.json isn't useful HOT 3
- Idea for window/document listeners, and possibly context/state
- displaying svg problem
- Prevent component from re-rendering on change HOT 3
- consider aliasing className HOT 2
- diff.diffNode() should return empty array when no changes
- Access DOM node in onCreate HOT 4
- Cannot npm install from github HOT 2
- Deku Override
- Provide single builded file
- 404 http://dekujs.github.io/deku HOT 5
- what happend? HOT 3
- onRemove called after DOM elements have been removed
- The first path and second path from render function unequal HOT 3
- ParseError: 'import' and 'export' may appear only with 'sourceType: module' HOT 1
- Link to docs http://anthonyshort.me/deku/ is 404 HOT 2
- Cannot read property 'forEach' of undefined
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 deku.