{"id":19767772,"url":"https://github.com/guanzo/vue-smooth-height","last_synced_at":"2025-04-30T16:34:03.643Z","repository":{"id":72021880,"uuid":"112057701","full_name":"guanzo/vue-smooth-height","owner":"guanzo","description":"Transition an elements height in response to data changes","archived":false,"fork":false,"pushed_at":"2018-08-19T08:33:32.000Z","size":423,"stargazers_count":38,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T03:06:25.940Z","etag":null,"topics":["animation","auto","height","transition","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guanzo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-11-26T05:15:49.000Z","updated_at":"2022-11-24T18:26:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"6e52b833-de3c-4db8-a5e3-cbbb8329fe79","html_url":"https://github.com/guanzo/vue-smooth-height","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guanzo%2Fvue-smooth-height","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guanzo%2Fvue-smooth-height/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guanzo%2Fvue-smooth-height/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guanzo%2Fvue-smooth-height/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guanzo","download_url":"https://codeload.github.com/guanzo/vue-smooth-height/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251742801,"owners_count":21636514,"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","auto","height","transition","vue"],"created_at":"2024-11-12T04:32:19.927Z","updated_at":"2025-04-30T16:34:03.599Z","avatar_url":"https://github.com/guanzo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Deprecation notice\n\nDue to an unfortunate naming decision, this package has moved to [vue-smooth-reflow](https://github.com/guanzo/vue-smooth-reflow). vue-smooth-reflow has more features, better handling of child transitions, and a few API changes.\n\n\n# Vue Smooth Height (VSM)\nA Vue mixin that answers the question, \"How do I transition height: auto?\"\n\nWhen the component's data is changed (i.e. when the `updated` lifecycle hook is called), its current height will smoothly transition to the new height, instead of instantly resizing.\n\nNote that this library has no overlap with Vue's built in transition components.\n\n## Demo\nhttps://jsfiddle.net/axfwg1L0/94/\n\n## Installation\n\nDownload via npm:\n```shell\n$ npm install vue-smooth-height\n```\n\nInclude via cdn:\n```html\n\u003cscript src=\"https://unpkg.com/vue-smooth-height\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nModule:\n\n```javascript\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cdiv ref=\"container\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport smoothHeight from 'vue-smooth-height';\n\nexport default {\n    mixins:[smoothHeight],\n    mounted(){\n        this.$smoothElement({\n            el: this.$refs.container,\n        })\n    },\n}\n\u003c/script\u003e\n```\n\nBrowser:\n\nThe mixin is available via the global variable `SmoothHeight`\n\n```javascript\nVue.component('myComponent', {\n    mixins:[SmoothHeight],\n    mounted(){\n        this.$smoothElement({\n            el: this.$refs.container,\n        })\n    },\n     template:\n        `\n        \u003cdiv\u003e\n            \u003cdiv ref=\"container\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        `\n})\n```\n\n## Transitions\nVSM will check if the element has a height transition, either through the stylesheet or inline styles. If it exists, VSM will use that. If it doesn't, it will apply `transition: height .5s` to the element's inline style, and append any existing transition properties it finds.\n\nFor example, if the element has this style:\n\n```\n.element {\n    transition: opacity 1s;\n}\n```\n\nVSM will set ```style=\"transition: opacity 1s, height .5s;\"``` on the element during the transition. After the transition, it will remove the inline style.\n\nFor compatibility, do not set transitions on other properties as an inline style, as they will be overridden.\n\n### Child transitions\nOftentimes a child element will be removed with a vue transition, rather than immediately removed. This child transition will be detected, and the container height will be transitioned after it detects a bubbled `transitionend` event.\n\n**Beware of giving child elements a height transition, it'll conflict with this library's transition.** If you feel the need to do so, you don't need VSM on the container element.\n\n### Interrupted transitions\nIf the transition is interrupted, it will transition from the interrupted height to the new height. You don't need to do anything.\n\n## API\n### $smoothElement(options)\n#### options: Object | Array\n\nCan be a single options object,\nor an array of options objects.\n\nEnables smooth height transition on an element.\n\n\n**Option**|**Type**|**Default**|**Description**\n-----|-----|-----|-----\nel|Element, String|The component's `$el`|A reference to the element, or a selector string. Use a selector string if the element is not rendered initially. If the selector string returns multiple elements, the first matched element will be used.\ntransition|String|\u003cnobr\u003e`height .5s`\u003c/nobr\u003e| The CSS shorthand `transition` property. Use this option if you don't want to use stylesheets (`\u003cstyle\u003e...\u003c/style\u003e`).\nchildTransitions|Boolean|true|Run height transition after child transitions finish.\nhideOverflow|Boolean|false|If the element has `overflow-y: auto`, a scrollbar can temporarily appear during the transition. Set this option to `true` to hide the scrollbar during the transition.\ndebug|Boolean|false|Logs messages at certain times within the transition lifecycle.\n\n\n### $unsmoothElement(options)\n#### options: Object | Array\n\nCan be a single options object,\nor an array of options objects.\n\nDisables smooth height behavior on an element. Registered elements that have the same `el` as the passed in options will be unregistered. This usually isn't necessary, but is useful if you want to disable the behavior while the component is still alive.\n\n## Examples:\n\n\n```javascript\n\nmounted(){\n    // Zero config. Enables smooth height on this.$el\n    this.$smoothElement()\n    // Register with element reference\n    this.$smoothElement({\n        el: this.$refs.container,\n    })\n    // Register with classname. The first match will be used.\n    this.$smoothElement({\n        el: '.container',\n    })\n    // Pass an array of options\n    this.$smoothElement([\n        {\n            el: this.$refs.container,\n        },\n        {\n            el: '.container',\n            transition: 'height 1s ease-in-out .15s'\n            hideOverflow: true,\n            debug: true,\n        }\n    ])\n    // If the element reference is a component,\n    // make sure to pass in its \"$el\" property.\n    this.$smoothElement({\n        el: this.$refs.container.$el,\n    })\n\n},\n\n```\n\n### Browser compatibility\nDue to various browser quirks, I cannot guarantee that vue-smooth-height will work as intended on every browser.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguanzo%2Fvue-smooth-height","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguanzo%2Fvue-smooth-height","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguanzo%2Fvue-smooth-height/lists"}