{"id":13531997,"url":"https://github.com/solidjs-community/solid-transition-group","last_synced_at":"2025-04-07T15:10:16.004Z","repository":{"id":42219959,"uuid":"306806142","full_name":"solidjs-community/solid-transition-group","owner":"solidjs-community","description":"SolidJS components for applying animations when children elements enter or leave the DOM.","archived":false,"fork":false,"pushed_at":"2023-10-25T06:34:23.000Z","size":745,"stargazers_count":253,"open_issues_count":18,"forks_count":14,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-10-29T18:05:54.382Z","etag":null,"topics":["animation","css","solidjs","transition"],"latest_commit_sha":null,"homepage":"https://solid-transition-group.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solidjs-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-10-24T04:36:30.000Z","updated_at":"2024-10-26T19:35:55.000Z","dependencies_parsed_at":"2023-02-15T14:30:57.850Z","dependency_job_id":"2bde7cff-b0c1-46a8-9fb9-19e48eebabf3","html_url":"https://github.com/solidjs-community/solid-transition-group","commit_stats":{"total_commits":80,"total_committers":10,"mean_commits":8.0,"dds":0.4,"last_synced_commit":"5defdad7d3ae6c38120f63c8b343e86c22f899e4"},"previous_names":["solidjs/solid-transition-group"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-transition-group","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-transition-group/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-transition-group/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-transition-group/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solidjs-community","download_url":"https://codeload.github.com/solidjs-community/solid-transition-group/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247579146,"owners_count":20961381,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","solidjs","transition"],"created_at":"2024-08-01T07:01:07.509Z","updated_at":"2025-04-07T15:10:15.986Z","avatar_url":"https://github.com/solidjs-community.png","language":"TypeScript","readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?project=Transition%20Group\u0026type=core\" alt=\"Solid Transition Group\"\u003e\n\u003c/p\u003e\n\n# Solid Transition Group\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge\u0026logo=pnpm)](https://pnpm.io/)\n[![version](https://img.shields.io/npm/v/solid-transition-group?style=for-the-badge)](https://www.npmjs.com/package/solid-transition-group)\n[![downloads](https://img.shields.io/npm/dw/solid-transition-group?color=blue\u0026style=for-the-badge)](https://www.npmjs.com/package/solid-transition-group)\n\nComponents for applying animations when children elements enter or leave the DOM. Influenced by React Transition Group and Vue Transitions for the SolidJS library.\n\n## Installation\n\n```bash\nnpm install solid-transition-group\n# or\nyarn add solid-transition-group\n# or\npnpm add solid-transition-group\n```\n\n## Transition\n\n`\u003cTransition\u003e` serve as transition effects for single element/component. The `\u003cTransition\u003e` 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.\n\nAll props besides `children` are optional.\n\n### Using with CSS\n\nUsage 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.\n\nThe 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.\n\n```tsx\nimport { Transition } from \"solid-transition-group\"\n\nconst [isVisible, setVisible] = createSignal(true)\n\n\u003cTransition name=\"slide-fade\"\u003e\n  \u003cShow when={isVisible()}\u003e\n    \u003cdiv\u003eHello\u003c/div\u003e\n  \u003c/Show\u003e\n\u003c/Transition\u003e\n\nsetVisible(false) // triggers exit transition\n```\n\nExample CSS transition:\n\n```css\n.slide-fade-enter-active,\n.slide-fade-exit-active {\n  transition: opacity 0.3s, transform 0.3s;\n}\n.slide-fade-enter,\n.slide-fade-exit-to {\n  transform: translateX(10px);\n  opacity: 0;\n}\n.slide-fade-enter {\n  transform: translateX(-10px);\n}\n```\n\nProps for customizing the CSS classes applied by `\u003cTransition\u003e`:\n\n| Name               | Description                                                                                                                                                     |\n| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `name`             | Used to automatically generate transition CSS class names. e.g. `name: 'fade'` will auto expand to `.fade-enter`, `.fade-enter-active`, etc. Defaults to `\"s\"`. |\n| `enterClass`       | CSS class applied to the entering element at the start of the enter transition, and removed the frame after. Defaults to `\"s-enter\"`.                           |\n| `enterToClass`     | CSS class applied to the entering element after the enter transition starts. Defaults to `\"s-enter-to\"`.                                                        |\n| `enterActiveClass` | CSS class applied to the entering element for the entire duration of the enter transition. Defaults to `\"s-enter-active\"`.                                      |\n| `exitClass`        | CSS class applied to the exiting element at the start of the exit transition, and removed the frame after. Defaults to `\"s-exit\"`.                              |\n| `exitToClass`      | CSS class applied to the exiting element after the exit transition starts. Defaults to `\"s-exit-to\"`.                                                           |\n| `exitActiveClass`  | CSS class applied to the exiting element for the entire duration of the exit transition. Defaults to `\"s-exit-active\"`.                                         |\n\n### Using with JavaScript\n\nYou can also use JavaScript to animate the transition. The `\u003cTransition\u003e` 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.\n\n```jsx\n\u003cTransition\n  onEnter={(el, done) =\u003e {\n    const a = el.animate([{ opacity: 0 }, { opacity: 1 }], {\n      duration: 600\n    });\n    a.finished.then(done);\n  }}\n  onExit={(el, done) =\u003e {\n    const a = el.animate([{ opacity: 1 }, { opacity: 0 }], {\n      duration: 600\n    });\n    a.finished.then(done);\n  }}\n\u003e\n  {show() \u0026\u0026 \u003cdiv\u003eHello\u003c/div\u003e}\n\u003c/Transition\u003e\n```\n\n**Events** proved by `\u003cTransition\u003e` for animating elements with JavaScript:\n\n| Name            | Parameters                           | Description                                                                                                                                                                                                                                                                                                                                                                           |\n| --------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `onBeforeEnter` | `element: Element`                   | Function called before the enter transition starts. The `element` is not yet rendered.                                                                                                                                                                                                                                                                                                |\n| `onEnter`       | `element: Element, done: () =\u003e void` | Function called when the enter transition starts. The `element` is rendered to the DOM. Call `done` to end the transition - removes the enter classes, and calls `onAfterEnter`. If the parameter for `done` is not provided, it will be called on `transitionend` or `animationend`.                                                                                                 |\n| `onAfterEnter`  | `element: Element`                   | Function called after the enter transition ends. The `element` is removed from the DOM.                                                                                                                                                                                                                                                                                               |\n| `onBeforeExit`  | `element: Element`                   | Function called before the exit transition starts. The `element` is still rendered, exit classes are not yet applied.                                                                                                                                                                                                                                                                 |\n| `onExit`        | `element: Element, done: () =\u003e void` | Function called when the exit transition starts, after the exit classes are applied (`enterToClass` and `exitActiveClass`). The `element` is still rendered. Call `done` to end the transition - removes exit classes, calls `onAfterExit` and removes the element from the DOM. If the parameter for `done` is not provided, it will be called on `transitionend` or `animationend`. |\n| `onAfterExit`   | `element: Element`                   | Function called after the exit transition ends. The `element` is removed from the DOM.                                                                                                                                                                                                                                                                                                |\n\n### Changing Transition Mode\n\nBy default, `\u003cTransition\u003e` 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.\n\nBy default the transition won't be applied on initial render. You can change this behavior by setting the `appear` prop to `true`.\n\n\u003e **Warning:** When using `appear` with SSR, the initial transition will be applied on the client-side, which might cause a flash of unstyled content.\n\u003e You need to handle applying the initial transition on the server-side yourself.\n\n## TransitionGroup\n\n### Props\n\n- `moveClass` - CSS class applied to the moving elements for the entire duration of the move transition. Defaults to `\"s-move\"`.\n- exposes the same props as `\u003cTransition\u003e` except `mode`.\n\n### Usage\n\n`\u003cTransitionGroup\u003e` serve as transition effects for multiple elements/components.\n\n`\u003cTransitionGroup\u003e` 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.\n\n```jsx\n\u003cul\u003e\n  \u003cTransitionGroup name=\"slide\"\u003e\n    \u003cFor each={state.items}\u003e{item =\u003e \u003cli\u003e{item.text}\u003c/li\u003e}\u003c/For\u003e\n  \u003c/TransitionGroup\u003e\n\u003c/ul\u003e\n```\n\n## Demo\n\nKitchen sink demo: https://solid-transition-group.netlify.app/\n\nSource code: https://github.com/solidjs-community/solid-transition-group/blob/main/dev/pages/kitchen-sink.tsx\n\n## FAQ\n\n- **How to use with Portal?** - [Issue #8](https://github.com/solidjs-community/solid-transition-group/issues/8)\n- **How to use with Outlet?** - [Issue #29](https://github.com/solidjs-community/solid-transition-group/issues/29)\n- **Why elements are not connected in outin mode** - [Issue #34](https://github.com/solidjs-community/solid-transition-group/issues/34)\n","funding_links":[],"categories":["📦 Components \u0026 Libraries","TypeScript"],"sub_categories":["UI Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidjs-community%2Fsolid-transition-group","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolidjs-community%2Fsolid-transition-group","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidjs-community%2Fsolid-transition-group/lists"}