search

solidjs-community / solid-transition-group

SolidJS components for applying animations when children elements enter or leave the DOM.
https://solid-transition-group.netlify.app
MIT License
247 stars 13 forks source link

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

Open nate-summercook opened 8 months ago

nate-summercook commented 8 months ago

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>
thetarnav commented 8 months ago

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.