This repository has been archived by the owner on Jun 17, 2021. It is now read-only.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Upgrade to styled-components v4.2.0 #374
base: master
Are you sure you want to change the base?
Upgrade to styled-components v4.2.0 #374
Changes from 1 commit
a5b0670
91b7fb7
6a7471a
d0f6590
e898da0
7123aac
46eb73c
2a63787
ad19f95
d7a6ee0
6bcfc6a
f55c40e
58c8849
56da823
22c7637
615a74d
c990f20
6a93dd8
File filter
Filter by extension
Conversations
Jump to
There are no files selected for viewing
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.
Unfortunately this interpolate change isn't producing quite the right result... it's still sticking to the top and not having the correct offset animation. The correct behavior has offset at 50 at first, and when moving to next step, offset becomes 0 and content shifts up smoothly:
But I dug into it a little more and I think I found the solution! Remove the
native
prop on Spring:And then reset this to the original code:
This fixes it for me :) I'm not really sure what native is or why it's here, do you know?
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.
ah, OK. The native prop is there for better performance and we should keep it. docs about native prop.
Maybe inlining the translate into a
style
prop in MainPane could help. I'll have a look later today.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.
@melanieseltzer Please have a look at the animation. It should be OK now. I'm not sure why
animation(styled.div)
is not working - maybe I'll create a minimal demo in a Codesandbox to see if it's happening there too.Could be an issue with Styled-components or React-spring because
animation
wrapping is recommended in React-Spring docs.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've created a Codesandbox with it - seems like the style is not added on the element but I'm not sure why.
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.
Nice, the updated code works 👍 Not sure why it's doing this either. I noticed some more animations not firing so I went and updated them using the way you've outlined, could you double check the logic? Feel free to modify if there's a more elegant way to write these.