Block: remove animation component so it is just a hook #22936
Conversation
|
Size Change: +1.7 kB (0%) Total Size: 1.12 MB
ℹ️ View Unchanged
|
| ref.current.style.transform = | ||
| x === 0 && y === 0 ? null : `translate3d(${ x }px,${ y }px,0)`; | ||
| ref.current.style.zIndex = | ||
| ! isSelected || ( x === 0 && y === 0 ) ? null : '1'; |
There was a problem hiding this comment.
hah :) so you're recreating react-spring. It would be interesting to see how this differs from React spring internally. I mean shouldn't we be able to pass a ref for react-spring to do that.
There was a problem hiding this comment.
Ok, just read the use-spring issue. i wonder what's different between this and applyAnimatedValues calls? Also should we upgrade?
There was a problem hiding this comment.
Not really as far as recreating. It still provides the values, we just take render it here instead of passing instructions on how to render it for us. Ideally it would be great if we could just pass the ref and instructions to useSpring, but there's no big difference.
There was a problem hiding this comment.
yes, so it looks like this is the function that runs in the library https://github.com/react-spring/react-spring/blob/master/src/targets/web/globals.ts#L82-L127 which is pretty similar to what you did for the "styles" here.
There was a problem hiding this comment.
While testing though, it seems the animation is broken for me (blocks overlap)
There was a problem hiding this comment.
I tested on Arch Linux using a browser based on Chromium 80, and the block movement animations all seem fine to me. I also tested in Firefox Developer Edition 78.0b2 and everything worked there as well.
There was a problem hiding this comment.
That's weird, they overlap for me regardless of the browser (Chrome and Safari)
There was a problem hiding this comment.
@youknowriad Did you do a full refresh etc? It works fine for me. I also tried switching branches a few times, but I can't reproduce any overlap issues
There was a problem hiding this comment.
So I just tested for the third time and this time it worked. Sorry for delaying that.
There was a problem hiding this comment.
No worries :) I'm glad it works now
ZebulanStanphill
added
[Feature] Blocks
packages/block-editor/src/components/use-moving-animation/index.js
Outdated
Show resolved
Hide resolved
|
Thanks! |
Description
I'm pretty excited about this PR. :) This PR removes the
Animatedcomponent from the block tree by applying styles to the ref on frame instead. This way, the whole animation is now reduced to a simple hook.For background, see pmndrs/react-spring#1042.
Why is this exciting? This could potentially allow us to write a simple
useBlock( ref )component to be used within blocks. Such a hook would be very flexible to use compared to a component or HoC.How has this been tested?
Screenshots
Types of changes
Checklist: