Hacker News new | past | comments | ask | show | jobs | submit login

Okay, question: can it perform the following task elegantly?

Say, I build a declarative tree describing a layout, and I render it. Now I remove one item from the tree. Can the layout engine efficiently remove the item from the view, and... (now it comes) provide an animation for it? As in, the item slowly losing opacity, then the surrounding items moving closer together? (Or a different animation depending on settings).

Of course, the opposite should also be possible (i.e., inserting an item).

Implement this, and we're a step beyond CSS, because so far this has not been possible (elegantly) in CSS. I.e., remove the element from the DOM tree, and it is gone immediately (without the animation). And no amount of CSS can fix this.




One motivation for reimplementing a layout engine for React Native was to solve this exact problem that CSS doesn't address.

We have LayoutAnimation inside of React Native which lets you do that. It's not very well documented and the delete method is not implemented, but the idea is there :)

https://facebook.github.io/react-native/docs/layoutanimation...


Yoga itself does not handle animation but by using another animation system on top of Yoga it should be very possible. I have not yet tried it myself but by wrapping a layout change in a UIView animation block the above should be doable (on iOS but similar should hold on other platforms).


Interesting. Could it be done efficiently? I.e., without walking the complete tree on every update?


It's platform specific, as I understand Yoga, it's just a nicer way to write UI code as I see it. On iOS for example, you should totally be able to wrap it be able to wrap Yoga code in existing animation engine, like UIView animation, layer animations and UIKit dynamics. So it'll be as efficient as the system its running on implemented its layout and animation engine. In the case of iOS, it would be amazingly efficient.


Animation effects like this are more annoying than anything else, anyway.


No it's not, nicely done animations, and I'm not saying over the top animation, can ease context changes for example. It's better to have an object moving to its new place than to have an object disappear and reappear somewhere else on the screen.


Over the top example: Mac mail, when sending email send the window "over the top" of your screen. As mentioned above, it's not the effect, it's the purpose. Better to not animate and be considered "lazy" or "inelegant" than to over animate and annoy.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: