Skip to content

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

@nate-summercook

Description

@nate-summercook

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions