Adding Animation about deku HOT 13 CLOSED

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.