{"id":13765191,"url":"https://github.com/robbevp/stimulus-transition","last_synced_at":"2025-12-30T12:30:20.655Z","repository":{"id":40422311,"uuid":"354277166","full_name":"robbevp/stimulus-transition","owner":"robbevp","description":"Enter/Leave transition for stimulusJS, inspired by Vue/Alpine syntax","archived":false,"fork":false,"pushed_at":"2024-07-01T09:09:07.000Z","size":341,"stargazers_count":79,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-22T05:48:05.542Z","etag":null,"topics":["stimulus","stimulusjs","transitions"],"latest_commit_sha":null,"homepage":"","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/robbevp.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,"publiccode":null,"codemeta":null}},"created_at":"2021-04-03T11:43:35.000Z","updated_at":"2025-01-30T15:00:27.000Z","dependencies_parsed_at":"2023-02-18T23:01:12.833Z","dependency_job_id":"2f193b31-b003-4595-a2df-3f03010b4dfb","html_url":"https://github.com/robbevp/stimulus-transition","commit_stats":{"total_commits":117,"total_committers":2,"mean_commits":58.5,"dds":"0.18803418803418803","last_synced_commit":"85d2320942f4ee18e511862328847eb75daf8be7"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robbevp%2Fstimulus-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robbevp%2Fstimulus-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robbevp%2Fstimulus-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robbevp%2Fstimulus-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robbevp","download_url":"https://codeload.github.com/robbevp/stimulus-transition/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253480520,"owners_count":21915249,"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":["stimulus","stimulusjs","transitions"],"created_at":"2024-08-03T16:00:35.236Z","updated_at":"2025-12-30T12:30:20.408Z","avatar_url":"https://github.com/robbevp.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# Stimulus Transition\n\nEnter/Leave transitions for Stimulus - inspired by the syntax from Vue and Alpine.  \nThe controller watches for changes to computed display style to automatically run the transitions. This could be an added/removed class, a change in the element's `style`-attribute or adding/removing the `hidden`-attribute. \n\n## Install\n\nRun `yarn add stimulus-transition` to install\n\nIf you are using `@hotwired/stimulus` instead of `stimulus` in your project's `package.json`, you need to add `stimulus add an alias in your dependencies. See [this issue](https://github.com/robbevp/stimulus-transition/issues/104) for details.\n```json\n\"dependencies\": {\n  ...\n  \"stimulus\": \"npm:@hotwired/stimulus\"\n}\n```\n\n\nRegister the controller in your application\n```javascript\nimport { Application } from \"stimulus\"\nimport TransitionController from 'stimulus-transition'\n\nconst application = Application.start()\napplication.register(\"transition\", TransitionController)\n```\n\n## Usage\n\nAdd the `transition` controller to each element you want to transition and add classes for the transition.\n\n```HTML\n\u003cdiv data-controller=\"transition\"\n     data-transition-enter-active=\"enter-class\"\n     data-transition-enter-from=\"enter-from-class\"\n     data-transition-enter-to=\"enter-to-class\"\n     data-transition-leave-active=\"or-use multiple classes\"\n     data-transition-leave-from=\"or-use multiple classes\"\n     data-transition-leave-to=\"or-use multiple classes\"\u003e\n  \u003c!-- content --\u003e\n\u003c/div\u003e\n```\n\nThe controller watch for changes to the computed display style on the exact element. You can trigger this by changing the classList, the element's style or with the `hidden`-attribute. If the change would cause the element to appear/disappear, the transition will run.\n\nDuring the transition, the effect of your change will be canceled out and be reset afterwards. This controller will not change the display style itself.\n\nAll of the below should trigger a transition.\n\n```javascript\nexport default class extends Controller {\n  static targets = [\"options\"]\n\n  showOptions() {\n    this.optionsTarget.hidden = false;\n  }\n\n  hideOptions() {\n    this.optionsTarget.hidden = true;\n  }\n\n  addClass() {\n    this.optionsTarget.classList.add(\"hidden\")\n  }\n\n  removeClass() {\n    this.optionsTarget.classList.add(\"hidden\")\n  }\n\n  setDisplayNone() {\n    this.optionsTarget.style.setProperty(\"display\", \"none\")\n  }\n}\n```\n\n### Optional classes\nIf you don't need one of the classes, you can omit the attributes. The following will just transition on enter:\n```HTML\n\u003cdiv data-controller=\"transition\"\n     data-transition-enter-active=\"enter-class\"\n     data-transition-enter-from=\"enter-from-class\"\n     data-transition-enter-to=\"enter-to-class\"\u003e\n  \u003c!-- content --\u003e\n\u003c/div\u003e\n```\n### Initial transition\nIf you want to run the transition when the element in entered in the DOM, you should add the `data-transition-initial-value`-attribute to the element. The value you enter is not used.\n```HTML\n\u003cdiv data-controller=\"transition\"\n     data-transition-initial-value\n     data-transition-enter-active=\"enter-class\"\n     data-transition-enter-from=\"enter-from-class\"\n     data-transition-enter-to=\"enter-to-class\"\u003e\n  \u003c!-- content --\u003e\n\u003c/div\u003e\n```\n### Destroy after leave\n\nYou can also destroy the element after running the leave transition by adding `data-transition-destroy-value`\n\n```HTML\n\u003cdiv data-controller=\"transition\"\n     data-transition-destroy-value\n     data-transition-enter-active=\"enter-class\"\n     data-transition-enter-from=\"enter-from-class\"\n     data-transition-enter-to=\"enter-to-class\"\n     data-transition-leave-active=\"or-use multiple classes\"\n     data-transition-leave-from=\"or-use multiple classes\"\n     data-transition-leave-to=\"or-use multiple classes\"\u003e\n\u003c/div\u003e\n```\n\n### Listen for transitions\n\nIf you want to run another action after the transition is completed, you can listen for the following events on the element.\n* `transition:end-enter`\n* `transition:end-leave`\n\nThis would look something like:\n```HTML\n\u003cdiv data-controller=\"transition\"\n     data-transition-enter-active=\"enter-class\"\n     data-transition-enter-from=\"enter-from-class\"\n     data-transition-enter-to=\"enter-to-class\"\n     data-action=\"transition:end-enter-\u003econtroller#action\"\u003e\n  \u003c!-- content --\u003e\n\u003c/div\u003e\n```\n\n### Note on using `hidden`\nIf you use the hidden attribute, you have to make sure that you set the display property correctly for all hidden items.  \nFor example:\n```css\n[hidden] {\n  display: none !important\n}\n```\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/robbevp/stimulus-transition. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.\n\n## License\n\nThis package is available as open source under the terms of the MIT License.\n\n## Credits\nThis implementation of the transition is inspired by [the following article from Sebastian De Deyne](https://sebastiandedeyne.com/javascript-framework-diet/enter-leave-transitions/) - it's an interesting read to understand what is happening in these transitions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobbevp%2Fstimulus-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobbevp%2Fstimulus-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobbevp%2Fstimulus-transition/lists"}