open-ui

open-ui copied to clipboard

I was talking to @argyleink about how the <selectedoption> element sets new values in https://github.com/openui/open-ui/issues/571#issuecomment-1696637459 and he was interested in whether the author could create a transition or a view transition when the <selectedoption> content changes. Maybe this is something we could find a way to support?

UA styles are like:

selectedoption {
  view-transition-name: none;
}

But author styles are like, no way, lemme animate:

.color-picker selectedoption {
  view-transition-name: selected-color-option;
}

::view-transition-new(selected-color-option) {
  animation: var(--slide-in-up);
}

::view-transition-old(selected-color-option) {
  animation: var(--slide-out-up);
}

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

I'm not sure exactly what browser support would be needed in order for this to work. @argyleink would you need to have a UA style rule with view-transition-name?

hm, might not be that simple because there could be multiple on the page. doesnt seem a good idea for the UA to attempt multiple unique view transition names for selected options. the intent of this issue is good, but the strategy being offered via the UA and VT, isnt.

@starting-style and transition: display 1s allow-discrete doesn't seem to work here, should we support it?

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

I was able to animate a change in the selected value here: https://codepen.io/jarhar/pen/PwYbmrp?editors=0100

I was able to animate a change in the selected value here: https://codepen.io/jarhar/pen/PwYbmrp?editors=0100

that animates the new choice in, but not out. so there's no crossfade, it's a bit abrupt. but it's better than nothing, and my selects are using this also to make the choice a little less abrupt.

Is there more work needed here or can this be closed?

Supporting view transitions for builtin elements like this is something that would be nice to add in the future, for select and other elements.

For now, if you want to make a view transition, you'll have to implement <selectedcontent> manually with script. Here's an example: https://codepen.io/jarhar/pen/pvvGzOe?editors=1111