feat: add CSS variable to customize the <media-controller> hide transition #1051
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@R-Delfino95 is attempting to deploy a commit to the Mux Team on Vercel. A member of the Team first needs to authorize it. |
R-Delfino95
changed the title
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
luwes
reviewed
Jan 15, 2025
src/js/media-container.ts
Outdated
| @@ -169,7 +169,7 @@ template.innerHTML = /*html*/ ` | |||
| Attributes.NO_AUTOHIDE | |||
| }]):not([role=dialog])) { | |||
| opacity: 0; | |||
| transition: opacity 1s; | |||
| transition: var(--media-hide-transition, opacity 1s); | |||
There was a problem hiding this comment.
this is good but I would change the naming to include control. we've also used in and out naming for transitions to make that distinction. @heff @cjpillsbury thoughts?
I propose making this CSS var --media-control-transition-out and then the transition above we can make --media-control-transition-in
There was a problem hiding this comment.
Great! I renamed the variable and created the variable for the show transition
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Related to #874
--media-control-transition-outCSS variable to optionally change the transition effect when hiding the<media-controller>component.--media-control-transition-inCSS variable to optionally change the transition effect when showing the<media-controller>component.basic-video.html