Loss of styles on exit transition when used with @suid #43

nate-summercook · 2024-02-01T22:07:34Z

When this library is being used together with https://suid.io/, all material styles are lost on exit transition, because the <style> element in the <head> gets removed when the exit transition starts. Seems like SUID is cleaning house when it thinks the styled element is no longer in the dom (while it still is because of the ongoing transition).

Here's an example snippet. The described behavior happens when removing a message, which triggers the exit animation:

    <TransitionGroup name="slide-fade">
      <For each={messages()}>
        {(message) =>
          <Paper onClick={() => messageClicked(message)}>
            <Typography>{message.text}</Typography>
          </Paper>
        }
      </For>
    </TransitionGroup>

The text was updated successfully, but these errors were encountered:

thetarnav · 2024-02-02T07:43:11Z

Should this be an issue here or in SUID?
I’m not sure what can be done here. Transition component doesn’t have a control over the disposal of the owner of existing branch, it only reacts to it.
I’m not sure what SUID could do either. If they remove the styles in a cleanup, they don’t have other options.
Both SUID and transition-group are separate libraries, and neither should special case one another.
The only common part between the two is solid, so this is where the solution needs to be introduced imo.
At least if the API of transition-group is to remain without change. Which is, I think, one of the goals of this library.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Loss of styles on exit transition when used with @suid #43

Loss of styles on exit transition when used with @suid #43

nate-summercook commented Feb 1, 2024

thetarnav commented Feb 2, 2024 •

edited

Loading

Loss of styles on exit transition when used with @suid #43

Loss of styles on exit transition when used with @suid #43

Comments

nate-summercook commented Feb 1, 2024

thetarnav commented Feb 2, 2024 • edited Loading

thetarnav commented Feb 2, 2024 •

edited

Loading