Solid Transition Group

Components for applying animations when children elements enter or leave the DOM. Influenced by React Transition Group and Vue Transitions for the SolidJS library.

Installation

npm install solid-transition-group
# or
yarn add solid-transition-group
# or
pnpm add solid-transition-group

Transition

serve as transition effects for single element/component. The only applies the transition behavior to the wrapped content inside; it doesn't render an extra DOM element, or show up in the inspected component hierarchy.

All props besides children are optional.

Using with CSS

Usage with CSS is straightforward. Just add the name prop and the CSS classes will be automatically generated for you. The name prop is used as a prefix for the generated CSS classes. For example, if you use name="slide-fade", the generated CSS classes will be .slide-fade-enter, .slide-fade-enter-active, etc.

The exitting element will be removed from the DOM when the first transition ends. You can override this behavior by providing a done callback to the onExit prop.

import { Transition } from "solid-transition-group"

const [isVisible, setVisible] = createSignal(true)


  
    <div>Hello</div>
  


setVisible(false) // triggers exit transition

Example CSS transition:

.slide-fade-enter-active,
.slide-fade-exit-active {
  transition: opacity 0.3s, transform 0.3s;
}
.slide-fade-enter,
.slide-fade-exit-to {
  transform: translateX(10px);
  opacity: 0;
}
.slide-fade-enter {
  transform: translateX(-10px);
}

Props for customizing the CSS classes applied by ``:

Using with JavaScript

You can also use JavaScript to animate the transition. The `` component provides several events that you can use to hook into the transition lifecycle. The onEnter and onExit events are called when the transition starts, and the onBeforeEnter and onBeforeExit events are called before the transition starts. The onAfterEnter and onAfterExit events are called after the transition ends.

 {
    const a = el.animate([{ opacity: 0 }, { opacity: 1 }], {
      duration: 600
    });
    a.finished.then(done);
  }}
  onExit={(el, done) => {
    const a = el.animate([{ opacity: 1 }, { opacity: 0 }], {
      duration: 600
    });
    a.finished.then(done);
  }}
>
  {show() &amp;&amp; <div>Hello</div>}

Events proved by `` for animating elements with JavaScript:

Changing Transition Mode

By default, `` will apply the transition effect to both entering and exiting elements simultaneously. You can change this behavior by setting the mode prop to "outin" or "inout". The "outin" mode will wait for the exiting element to finish before applying the transition to the entering element. The "inout" mode will wait for the entering element to finish before applying the transition to the exiting element.

By default the transition won't be applied on initial render. You can change this behavior by setting the appear prop to true.

> Warning: When using appear with SSR, the initial transition will be applied on the client-side, which might cause a flash of unstyled content. > You need to handle applying the initial transition on the server-side yourself.

TransitionGroup

Props

• moveClass - CSS class applied to the moving elements for the entire duration of the move transition. Defaults to "s-move".
• exposes the same props as `` except mode.

Usage

`` serve as transition effects for multiple elements/components.

`` supports moving transitions via CSS transform. When a child's position on screen has changed after an update, it will get applied a moving CSS class (auto generated from the name attribute or configured with the move-class attribute). If the CSS transform property is "transition-able" when the moving class is applied, the element will be smoothly animated to its destination using the FLIP technique.

<ul>
  
    {item =&gt; <li>{item.text}</li>}
  
</ul>

Demo

Kitchen sink demo: https://solid-transition-group.netlify.app/

Source code: https://github.com/solidjs-community/solid-transition-group/blob/main/dev/Test.tsx

FAQ

• How to use with Portal? - Issue #8
• How to use with Outlet? - Issue #29
• Why elements are not connected in outin mode - Issue #34