-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
While testing though, it seems the animation is broken for me (blocks overlap)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's weird, they overlap for me regardless of the browser (Chrome and Safari)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So I just tested for the third time and this time it worked. Sorry for delaying that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No worries :) I'm glad it works now
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
Animated
component 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: