{"id":22355427,"url":"https://github.com/denisaleman/toggletransition","last_synced_at":"2025-03-26T13:12:22.236Z","repository":{"id":57377678,"uuid":"438653689","full_name":"denisaleman/toggleTransition","owner":"denisaleman","description":"Tiny vanilla Javascript plugin that helps you to Show/Hide/Toggle DOM Elements with CSS transitions without worrying about details.","archived":false,"fork":false,"pushed_at":"2022-02-01T23:17:34.000Z","size":1453,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T14:58:35.591Z","etag":null,"topics":["csstransition","dom-manipulation","hide","hide-elements","javascript","no-dependencies","show","toggle","transitionend-event","transitions","vanilla","vanilla-javascript","vanilla-js","visibility"],"latest_commit_sha":null,"homepage":"","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/denisaleman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"denisaleman","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://buymeacoffee.com/denisaleman"]}},"created_at":"2021-12-15T14:12:00.000Z","updated_at":"2022-01-06T23:21:14.000Z","dependencies_parsed_at":"2022-09-19T03:30:29.915Z","dependency_job_id":null,"html_url":"https://github.com/denisaleman/toggleTransition","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisaleman%2FtoggleTransition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisaleman%2FtoggleTransition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisaleman%2FtoggleTransition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisaleman%2FtoggleTransition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/denisaleman","download_url":"https://codeload.github.com/denisaleman/toggleTransition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245659050,"owners_count":20651525,"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":["csstransition","dom-manipulation","hide","hide-elements","javascript","no-dependencies","show","toggle","transitionend-event","transitions","vanilla","vanilla-javascript","vanilla-js","visibility"],"created_at":"2024-12-04T14:06:29.785Z","updated_at":"2025-03-26T13:12:22.211Z","avatar_url":"https://github.com/denisaleman.png","language":"JavaScript","funding_links":["https://ko-fi.com/denisaleman","https://buymeacoffee.com/denisaleman","https://www.buymeacoffee.com/denisaleman"],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"Toggle transition\" src=\"/misc/logo.svg\" width=\"15%\" style=\"min-width: 200px;\"\u003e\n\n# toggleTransition.js\nTiny vanilla JavaScript plugin that enables you to show/hide/toggle DOM Element taking advantage of CSS transitions and without worrying about details.\n\n![npm](https://img.shields.io/npm/v/toggle-transition?logo=npm)\n![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/toggle-transition/latest?label=gzipped)\n![NPM](https://img.shields.io/npm/l/toggle-transition)\n![npm](https://img.shields.io/npm/dw/toggle-transition?logo=npm)\n\n## Problem\n\nCSS3 transition doesn't work with `display` property.\n\n\u003e CSS3 transitions don't apply to the `display` property, i.e., you can't do any sort of transition from `display: none` to `display: block` (or any combination).\n\n[Transitions on the CSS display property](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property) on StackOverflow.\n\n## How it solves the problem\n\nThe plugin shows/hides an element with CSS3 transition effects and manages its `display` property behind the scenes.\n\nIn case of hidding the element, `toggleTransition.js` sets element's `display` property to `none` right after transition ends, making use of `onTransitionEnd` event. \n\nIf case of showing the element, it sets the `display` back to initial state. Then CSS transition runs and the element appears smoothly.\n\n## In Action\n\n[![toggle transition in action](/misc/inAction.gif)](https://denisaleman.github.io/toggleTransition/example/initially_hidden.html)\n\n## Quickstart\n\n#### Use CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/toggle-transition@latest/toggleTransition.min.js\"\u003e\u003c/script\u003e\n```\n\n#### [Codepen](https://codepen.io/denisaleman/pen/oNGoqEm)\n\n```html\n\u003cstyle\u003e\n  body {\n    background-color: whitesmoke;\n  }\n\n  .example {\n    width: 300px;\n    background-color: floralwhite;\n    padding: 10px 20px;\n    box-shadow: 3px 3px 19px rgba(0, 0, 0, 0.2);\n    position: relative;\n    opacity: 0;\n    transition: opacity 0.3s, transform 0.3s;\n    transform: translateY(0px) scale(0.9);\n  }\n\n  .is_shown {\n    opacity: 1;\n    transform: translateY(10px) scale(1);\n  }\n\n  .is_hidden {\n    opacity: 0;\n    transform: translateY(0) scale(0.9);\n  }\n\u003c/style\u003e\n\n\u003cbutton class=\"button\"\u003eToggle It!\u003c/button\u003e\n\n\u003cdiv class=\"example is_hidden\"\u003e\n  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quisquam laboriosam quos tempore nobis quam officiis commodi. Eaque dolor eius animi voluptatum inventore? Eveniet, perspiciatis itaque obcaecati explicabo fugit blanditiis!\n\u003c/div\u003e\n\n\u003cscript\u003e\n  var instance = new ToggleTransition(document.querySelector('.example'), {\n    showTransitionClassname: \"is_shown\",\n    hideTransitionClassname: \"is_hidden\",\n    manageVisibilityWith: \"visibility\", // or \"display\"\n    onShowTransitionEnd: function (e, x) {\n      console.log(\"after show transition callback\", e, x);\n    },\n    onHideTransitionEnd: function (e, x) {\n      console.log(\"after hide transition callback\", e, x);\n    },\n  });\n\n  document.querySelector(\".button\").addEventListener(\"click\", function () {\n    instance.toggle();\n  });\n\u003c/script\u003e\n```\n\n## Examples\n\n - [Basic](https://denisaleman.github.io/toggleTransition/example/initially_hidden.html) ([Initially hidden](https://denisaleman.github.io/toggleTransition/example/initially_hidden.html) | [Initially shown](https://denisaleman.github.io/toggleTransition/example/initially_shown.html))\n - [Multiple](https://denisaleman.github.io/toggleTransition/example/multiple.html)\n - [Menu](https://denisaleman.github.io/toggleTransition/example/menu.html)\n\n\n## Install\n\nAdd package with your favorite package manager:\n\n```bash\n# npm\nnpm install toggle-transition\n\n# yarn\nyarn add toggle-transition\n```\n\nAdd it to your project:\n\n```js\nrequire \"toggle-transition\"\n```\n\n## Contribute\n\nAll of these will be appreciated:\n- Blog or tweet about the project\n- Improve documentation\n- Fix a bug\n- Implement a new feature\n- Discuss potential ways to improve project\n- Add a TODO to the code\n- Improve existing implementation, performance, etc.\n\nThis list of **[TODOs.md](TODOs.md)** has been kindly created for your convenience.\n\n1.  Fork it!\n2.  Create your feature branch: `git checkout -b my-new-feature`\n3.  Commit your changes: `git commit -am 'Add some feature'`\n4.  Push to the branch: `git push origin my-new-feature`\n5.  Submit a pull request.\n\n## License\n\nThe code licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php). The logo and the sign used in the header are under [Creative Commons Attribution 3.0 Unported License](http://creativecommons.org/licenses/by/3.0/deed.en_US). You are free to do whatever you want, don't remove my name from the source.\n\n\n###### Do you like this?\n[![\"Buy Me A Coffee\"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/denisaleman)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenisaleman%2Ftoggletransition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdenisaleman%2Ftoggletransition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenisaleman%2Ftoggletransition/lists"}