selectlist: Animating changes in the selected value

[josepharhar]

I was talking to @argyleink about how the <selectedoption> element sets new values in #571 (comment) 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?

[argyleink]

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);
}

[github-actions]

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.

[josepharhar]

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?

[argyleink]

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.

[yisibl]

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

[github-actions]

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.

[josepharhar]

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

[argyleink]

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.