{"id":28990999,"url":"https://github.com/Rails-Designer/turbo-transition","last_synced_at":"2025-06-25T01:03:06.484Z","repository":{"id":297001567,"uuid":"994795971","full_name":"Rails-Designer/turbo-transition","owner":"Rails-Designer","description":"A “minion” for Turbo-Frames and Streams. This custom element transitions elements as they enter or leave the DOM.","archived":false,"fork":false,"pushed_at":"2025-06-16T05:29:18.000Z","size":302,"stargazers_count":53,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-21T09:07:52.177Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://railsdesigner.com/turbo-transition/","language":"JavaScript","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/Rails-Designer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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,"zenodo":null}},"created_at":"2025-06-02T13:49:25.000Z","updated_at":"2025-06-20T12:15:30.000Z","dependencies_parsed_at":"2025-06-08T02:46:22.121Z","dependency_job_id":null,"html_url":"https://github.com/Rails-Designer/turbo-transition","commit_stats":null,"previous_names":["rails-designer/turbo-transition"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Rails-Designer/turbo-transition","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rails-Designer%2Fturbo-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rails-Designer%2Fturbo-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rails-Designer%2Fturbo-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rails-Designer%2Fturbo-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rails-Designer","download_url":"https://codeload.github.com/Rails-Designer/turbo-transition/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rails-Designer%2Fturbo-transition/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261783369,"owners_count":23208945,"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":[],"created_at":"2025-06-25T01:01:36.815Z","updated_at":"2025-06-25T01:03:06.472Z","avatar_url":"https://github.com/Rails-Designer.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Turbo Transition\n\nA “minion” for Turbo-Frames and Streams. This custom element transitions elements as they enter or leave the DOM.\n\n![Shows a fade out and slide up transition of one message after clicking a trash can icon](https://raw.githubusercontent.com/Rails-Designer/turbo-transition/HEAD/.github/turbo-transition-example.gif)\n\n**Sponsored By [Rails Designer](https://railsdesigner.com/)**\n\n\u003ca href=\"https://railsdesigner.com/\" target=\"_blank\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/Rails-Designer/turbo-transition/HEAD/.github/logo-dark.svg\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/Rails-Designer/turbo-transition/HEAD/.github/logo-light.svg\"\u003e\n    \u003cimg alt=\"Rails Designer\" src=\"https://raw.githubusercontent.com/Rails-Designer/turbo-transition/HEAD/.github/logo-light.svg\" width=\"240\" style=\"max-width: 100%;\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\nWant to be able to understand this JavaScript code? 😊 👉 [JavaScript for Rails Developers](https://javascriptforrails.com/)\n\n\n## Installation\n\n```bash\n# Using importmap\nbin/importmap pin turbo-transition\n\n# Using npm\nnpm install turbo-transition\n```\n\nThen add to your JavaScript entrypoint (`app/javascript/application.js`):\n\n```javascript\nimport \"turbo-transition\"\n```\n\n\n## Usage\n\nTurbo Transition works by wrapping your elements in a `\u003cturbo-transition\u003e` element and applying CSS classes at the right moments. Use it to transition new items sliding into lists, fade out deleted content, or any other transition effect with CSS. Each `\u003cturbo-transition\u003e` element must contain exactly one child element.\n\nThe element watches for two lifecycle events:\n\n- **enter**: when the element is added to the DOM;\n- **leave**: when the element is removed from the DOM.\n\n\n### Enter\n\n```erb\n\u003c%# app/views/tasks/create.turbo_stream.erb %\u003e\n\u003c%= turbo_stream.append \"tasks\" do %\u003e\n  \u003cturbo-transition\n    enter-from-class=\"fade-enter-from\"\n    enter-active-class=\"fade-enter-active\"\n    enter-to-class=\"fade-enter-to\"\n  \u003e\n    \u003c%= render partial: \"task\", locals: {task: @task} %\u003e\n  \u003c/turbo-transition\u003e\n\u003c% end %\u003e\n```\n\n\n### Leave\n\n```erb\n\u003c%# app/views/tasks/_task.html.erb %\u003e\n\u003cturbo-transition\n  id=\"\u003c%= dom_id(task) %\u003e\"\n  leave-from-class=\"fade-leave-from\"\n  leave-active-class=\"fade-leave-active\"\n  leave-to-class=\"fade-leave-to\"\n\u003e\n  \u003cdiv\u003e\n    \u003c%= task.title %\u003e\n    \u003c%= button_to \"Delete\", task, method: :delete %\u003e\n  \u003c/div\u003e\n\u003c/turbo-transition\u003e\n```\n\n\n### Example CSS\n\n```css\n.fade-enter-active, .fade-leave-active { transition: opacity 300ms ease-out; }\n.fade-enter-from, .fade-leave-to { opacity: 0; }\n.fade-enter-to, .fade-leave-from { opacity: 1; }\n```\n\nFor more transition examples, see [`examples/transitions.css`](examples/transitions.css). You can customize any transition using CSS properties:\n```html\n\u003cturbo-transition\n  class=\"modal\"\n  enter-from-class=\"fade-move-enter-from\"\n  enter-active-class=\"fade-move-enter-active\"\n  enter-to-class=\"fade-move-enter-to\"\n\u003e\n  \u003cdiv class=\"content\"\u003e\n    \u003c!-- Modal content --\u003e\n  \u003c/div\u003e\n\u003c/turbo-transition\u003e\n```\n\n```css\n.modal {\n  --transition-enter-y: -20px;\n  --transition-duration: 400ms;\n}\n\n@media (width \u003e 640px) {\n  .modal {\n    --transition-enter-y: 100%;\n    --transition-enter-x: 0;\n  }\n}\n```\n\n\n## Contributing\n\n```bash\n# Install dev dependencies\nnpm install\n\n# Run basic test\nnpm test\n\n# Release new version\nnpm version patch # or minor, or major\nnpm publish\ngit push\ngit push --tags\n```\n\n\n## License\n\nTurbo Transition is released under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRails-Designer%2Fturbo-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRails-Designer%2Fturbo-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRails-Designer%2Fturbo-transition/lists"}