-
-
Notifications
You must be signed in to change notification settings - Fork 4.5k
feat: css units in fly & blur transitions #7623
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
Conversation
9cb9571
to
d241921
Compare
Please add this feature to Edit: once CSSUnitValue is available on all major browsers we should support it too. Maybe you could implement it already? |
d241921
to
eeee462
Compare
Would you mind fixing the small merge conflict in this PR? We'll be attempting to go through all the outstanding PRs in the coming weeks |
eeee462
to
735f113
Compare
Someone is attempting to deploy a commit to the Svelte Team on Vercel. A member of the Team first needs to authorize it. |
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.
#6050 is the alternative to this - and I'm split on which one is better. Usability wise this PR feels better as you can input the number as you would in regular styles. The downside is the slightly increased runtime code because we need that split_css_unit
function.
split_css_unit does add additional runtime code, but only when importing a transition that might use it. |
Co-authored-by: Ben McCann <[email protected]>
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.
Thank you!
@Conduitry I think this is missing from the |
For the
fly
transition, the x & y are passed as numbers and are used are pixel values (px)This limits the range of what fly can do.
This PR adds support for passing the x & y as strings that can contain CSS units:
You can create an animation that are relative:
'100%'
is based on the width of the box.Or based on the viewport:
Other units are also supported, we use
rem
a lot,currently we are calculating the px value or accept that the animation doesn't scale.
With this PR we would be able to write:
As a guideline for the regex I looked at css notation.
'100%' ✅
'100 %' ❌
If no unit is provided it falls back to using px. '50' is interpreted as '50px'
Closes #6050
Before submitting the PR, please make sure you do the following
[feat]
,[fix]
,[chore]
, or[docs]
.Tests
npm test
and lint the project withnpm run lint