{"id":21525793,"url":"https://github.com/bkwld/vue-height-tween-transition","last_synced_at":"2025-10-23T21:33:51.457Z","repository":{"id":24866973,"uuid":"102633563","full_name":"BKWLD/vue-height-tween-transition","owner":"BKWLD","description":"Tween the height of the parent of transitioning items for use in accordions or carousels.","archived":false,"fork":false,"pushed_at":"2024-11-18T17:53:37.000Z","size":1543,"stargazers_count":16,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T11:02:01.155Z","etag":null,"topics":["transition","vuejs"],"latest_commit_sha":null,"homepage":"https://bkwld.github.io/vue-height-tween-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/BKWLD.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":"2017-09-06T16:42:36.000Z","updated_at":"2024-11-18T17:53:40.000Z","dependencies_parsed_at":"2024-01-11T19:21:28.372Z","dependency_job_id":"ae75390e-d0a6-4c6a-bb0c-67cd1cb93145","html_url":"https://github.com/BKWLD/vue-height-tween-transition","commit_stats":{"total_commits":76,"total_committers":4,"mean_commits":19.0,"dds":0.5263157894736843,"last_synced_commit":"4a5467fe583ae6520ae284c242932adbe631b80b"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-height-tween-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-height-tween-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-height-tween-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-height-tween-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BKWLD","download_url":"https://codeload.github.com/BKWLD/vue-height-tween-transition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248126728,"owners_count":21052014,"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":["transition","vuejs"],"created_at":"2024-11-24T01:38:30.126Z","updated_at":"2025-10-23T21:33:51.398Z","avatar_url":"https://github.com/BKWLD.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Height Tween Transition\n\nTweens between heights of default slotted element.\n\n![](http://yo.bkwld.com/0w3s302M0o2G/Screen%20Recording%202017-09-06%20at%2010.15%20AM.gif)\n\nDemo: https://bkwld.github.io/vue-height-tween-transition/\n\n## Usage\n\n```javascript\n// Add component\nimport 'vue-height-tween-transition/index.css'\nVue.component('height-tween', require('vue-height-tween-transition'))\n```\n\n#### Switching mode - Simultaneous\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class='quotes'\u003e\n   \u003cheight-tween switching name='fade'\u003e\n      \u003cquote :key='quote.id' :quote='quote'\u003e\u003c/quote\u003e\n   \u003c/height-tween\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data: function () { return {\n    quotes: [{ id: 1, quote: 'Text' }, { id: 2, quote: 'Another'}],\n    active: 0,\n  }},\n  computed: {\n    quote: function () { return this.quotes[this.active] }\n  },\n  methods: {\n    next: function() { this.active++ }\n  },\n}\n\u003c/script\u003e\n\u003cstyle\u003e\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.3s;\n}\n.fade-enter,\n.fade-leave-to {\n  opacity: 0;\n}\n.fade-leave-active {\n  position: absolute;\n  width: 100%;\n}\n\u003c/style\u003e\n```\n\n#### Switching mode - Out-In\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class='quotes'\u003e\n   \u003cheight-tween switching name='fade' mode='out-in'\u003e\n      \u003cquote :key='quote.id' :quote='quote'\u003e\u003c/quote\u003e\n   \u003c/height-tween\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data: function () { return {\n    quotes: [{ id: 1, quote: 'Text' }, { id: 2, quote: 'Another'}],\n    active: 0,\n  }},\n  computed: {\n    quote: function () { return this.quotes[this.active] }\n  },\n  methods: {\n    next: function() { this.active++ }\n  },\n}\n\u003c/script\u003e\n\u003cstyle\u003e\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.3s;\n}\n.fade-enter,\n.fade-leave-to {\n  opacity: 0;\n}\n\u003c/style\u003e\n```\n\n#### Toggle (Accordion) mode\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class='quotes'\u003e\n   \u003cheight-tween :duration='300'\u003e\n      \u003cquote :v-if='quote' :quote='quote'\u003e\u003c/quote\u003e\n   \u003c/height-tween\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data: function () { return {\n    quote: { id: 1, quote: 'Text' },\n  }},\n}\n\u003c/script\u003e\n```\n\n\n## Notes\n\n- To customize the height transition duration or other properties, define your own `height-tweening` CSS class.\n- Doesn't work with `in-out` mode transitions ... though not sure why someone would use those...\n- Expects a toggling transition to not use `mode`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fvue-height-tween-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbkwld%2Fvue-height-tween-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fvue-height-tween-transition/lists"}