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
feat(preset-mini): add start variant for @starting-style and transition-discrete, transition-normal rules #3621
base: main
Are you sure you want to change the base?
Conversation
✅ Deploy Preview for unocss ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
import type { Variant } from '@unocss/core' | ||
|
||
export const variantStartingStyle: Variant = { | ||
name: 'start', |
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 am not so sure about this variant; the name feels a bit too general and can be confusing. Since the feature is still experimental, I guess it might be better for you do it in-house at this moment.
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.
It is experimental but already in Chrome/Chrome for Android and Edge. https://caniuse.com/?search=%40starting-style
Webkit support coming soon: WebKit/WebKit@1544606
start
could be starting
instead (saw this in Tailwind, also not merged yet) but starting-style is what it's called basically.
No rush to merge (might as well wait for Tailwind PR review) but this will be useful for popovers using transitions instead of animations so could be nice to have if/when those become popular later.
This PR:
Adds a
start:
variant to support @starting-style which can be used to set initial values for popover CSS transitions. Used for fade in effects.This allows for three states in popover transitions:
start:popover-open:
popover-open:
https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
Adds
transition-discrete
andtransition-normal
rules.transition-discrete
can be needed for popover transitions (the End part) andtransition-normal
is the default behaviorhttps://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior
Example: