Solid Transition Group screenshot

Solid Transition Group

Updated: 29 Jan 2025
278 Stars

SolidJS components for applying animations when children elements enter or leave the DOM.

Categories

Overview:

Solid Transition Group is a library that provides components for applying animations when children elements enter or leave the DOM in SolidJS applications. It is influenced by React Transition Group and Vue Transitions. The main component, <Transition>, applies transition effects to single elements or components without rendering extra DOM elements.

Features:

  • Applied Animations: Apply animations to elements entering or leaving the DOM.
  • Influenced by Popular Libraries: Based on React Transition Group and Vue Transitions.
  • Single Element Transition: <Transition> component applies transition effects without extra DOM rendering.
  • Customizable CSS Classes: Name prop automatically generates CSS classes for easy customization.
  • JavaScript Animation Support: Use JavaScript events to hook into the transition lifecycle.

Installation:

To install the Solid Transition Group library, you can use npm. Run the following command in your terminal:

npm install solid-transition-group

Summary:

Solid Transition Group is a versatile library for creating smooth animations for elements entering or leaving the DOM in SolidJS applications. It offers a simple way to apply transitions using CSS classes, while also providing flexibility for JavaScript animations. With its customizable features and easy integration, it is a valuable tool for enhancing the user experience in SolidJS projects.