{"id":14973773,"url":"https://github.com/phegman/v-show-slide","last_synced_at":"2025-04-09T20:12:17.636Z","repository":{"id":32543368,"uuid":"136661829","full_name":"phegman/v-show-slide","owner":"phegman","description":"A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.","archived":false,"fork":false,"pushed_at":"2022-12-11T10:10:29.000Z","size":1267,"stargazers_count":105,"open_issues_count":27,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T20:12:12.918Z","etag":null,"topics":["javascript","slidedown","slideup","vue","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phegman.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}},"created_at":"2018-06-08T20:11:01.000Z","updated_at":"2024-10-24T07:45:42.000Z","dependencies_parsed_at":"2022-07-27T23:17:19.527Z","dependency_job_id":null,"html_url":"https://github.com/phegman/v-show-slide","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phegman%2Fv-show-slide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phegman%2Fv-show-slide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phegman%2Fv-show-slide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phegman%2Fv-show-slide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phegman","download_url":"https://codeload.github.com/phegman/v-show-slide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103872,"owners_count":21048245,"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":["javascript","slidedown","slideup","vue","vuejs","vuejs2"],"created_at":"2024-09-24T13:49:23.525Z","updated_at":"2025-04-09T20:12:17.607Z","avatar_url":"https://github.com/phegman.png","language":"TypeScript","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["杂","UI Components","Miscellaneous"],"readme":"[![Travis](https://img.shields.io/travis/phegman/v-show-slide.svg)](https://travis-ci.org/phegman/v-show-slide/)\n\n# v-show-slide\n\nA Vue.js directive for animating an element from `height: auto` to `height: 0px` and vice-versa.\n\n- 👻 **3kb (1kb gzipped)**\n- 📦 **No dependencies**\n- 🌚 **TypeScript support**\n- ⚙ **Uses CSS transitions**\n- 🕺 **Support for custom easings**\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Demo](#demo)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Accessibility](#accessibility-a11y)\n- [Browser Support](#browser-support)\n- [Support](#support)\n- [Contributing](#contributing)\n\n## Overview\n\nThere is no pure CSS way to animate an element to or from `height: auto`, this Vue.js directive solves this. It works the same way as `v-show` but will show the element with a sliding animation.\n\n## Demo\n\nDemo can be viewed here: [http://v-show-slide.peterhegman.com/](http://v-show-slide.peterhegman.com/)  \nSource code for demo can be viewed in `src/Demo.vue`\n\n## Installation\n\n### Yarn\n\n`yarn add v-show-slide`\n\n### NPM\n\n`npm install v-show-slide --save`\n\n### Install the Vue plugin\n\nIn your main JS file first import this plugin\n\n`import VShowSlide from 'v-show-slide'`\n\nInstall the plugin\n\n`Vue.use(VShowSlide)`\n\n## Usage\n\nOnce the plugin is installed the `v-show-slide` directive can be used in any of your components. This directive works the same way as `v-show`. If the value is `true` the element will slide open, if the value is `false` the element will slide closed.\n\nExample:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\" class=\"app\"\u003e\n    \u003cul id=\"features\" v-show-slide=\"featuresOpen\" class=\"features\"\u003e\n      \u003cli\u003eAliquam lorem\u003c/li\u003e\n      \u003cli\u003ePraesent porttitor nulla vitae posuere\u003c/li\u003e\n      \u003cli\u003eSuspendisse nisl elit rhoncus\u003c/li\u003e\n      \u003cli\u003eDonec mi odio faucibus\u003c/li\u003e\n      \u003cli\u003eCurabitur suscipit suscipit\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cbutton\n      @click=\"toggleFeatures\"\n      class=\"toggle-features\"\n      aria-controls=\"features\"\n      :aria-expanded=\"featuresOpen ? 'true' : 'false'\"\n    \u003e\n      {{ featuresOpen ? 'Hide Features' : 'View Features' }}\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'App',\n  data() {\n    return {\n      featuresOpen: false,\n    }\n  },\n  methods: {\n    toggleFeatures() {\n      this.featuresOpen = !this.featuresOpen\n    },\n  },\n}\n\u003c/script\u003e\n```\n\n### Defining duration and easing\n\nBy default duration is set to 300ms and easing is set to `ease`.\n\nTo override this, duration and easing can be passed as arguments to the directive. Duration should be defined in milliseconds. Built in easing options are: `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`\n\nDuration and easing can be set in this format `v-show-slide:duration:easing`\n\nExample:\n\n```html\n\u003cul v-show-slide:400:ease-in=\"featuresOpen\" class=\"features\"\u003e\n  \u003cli\u003eAliquam lorem\u003c/li\u003e\n  \u003cli\u003ePraesent porttitor nulla vitae posuere\u003c/li\u003e\n  \u003cli\u003eSuspendisse nisl elit rhoncus\u003c/li\u003e\n  \u003cli\u003eDonec mi odio faucibus\u003c/li\u003e\n  \u003cli\u003eCurabitur suscipit suscipit\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### Custom easing\n\nIf you want to define custom easing using `cubic-bezier` this can be done when installing the plugin. Pass an options object as the second parameter in `Vue.use`.\n\nExample:\n\n```js\nVue.use(VShowSlide, {\n  customEasing: {\n    exampleEasing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n  },\n})\n```\n\nYour custom easing can then be used like so (make sure to convert easing name to kebab-case):\n\n`v-show-slide:400:example-easing`\n\n### Events\n\nEvents are fired on the same element the directive was defined on. Below are the available events:\n\n| Event              | Description                                    |\n| ------------------ | ---------------------------------------------- |\n| @slide-open-start  | Fired when the element starts sliding open     |\n| @slide-open-end    | Fired when the element finishes sliding open   |\n| @slide-close-start | Fired when the element starts sliding closed   |\n| @slide-close-end   | Fired when the element finishes sliding closed |\n\nExample:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\" class=\"app\"\u003e\n    \u003cul\n      id=\"features\"\n      v-show-slide=\"featuresOpen\"\n      class=\"features\"\n      @slide-open-start=\"slideOpenStart\"\n      @slide-open-end=\"slideOpenEnd\"\n      @slide-close-start=\"slideCloseStart\"\n      @slide-close-end=\"slideCloseEnd\"\n    \u003e\n      \u003cli\u003eAliquam lorem\u003c/li\u003e\n      \u003cli\u003ePraesent porttitor nulla vitae posuere\u003c/li\u003e\n      \u003cli\u003eSuspendisse nisl elit rhoncus\u003c/li\u003e\n      \u003cli\u003eDonec mi odio faucibus\u003c/li\u003e\n      \u003cli\u003eCurabitur suscipit suscipit\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cbutton\n      @click=\"toggleFeatures\"\n      class=\"toggle-features\"\n      aria-controls=\"features\"\n      :aria-expanded=\"featuresOpen ? 'true' : 'false'\"\n    \u003e\n      {{ featuresOpen ? 'Hide Features' : 'View Features' }}\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'App',\n  data() {\n    return {\n      featuresOpen: false,\n    }\n  },\n  methods: {\n    toggleFeatures() {\n      this.featuresOpen = !this.featuresOpen\n    },\n    slideOpenStart() {\n      console.log('Slide Open Start')\n    },\n    slideOpenEnd() {\n      console.log('Slide Open End')\n    },\n    slideCloseStart() {\n      console.log('Slide Close Start')\n    },\n    slideCloseEnd() {\n      console.log('Slide Close End')\n    },\n  },\n}\n\u003c/script\u003e\n```\n\n## Accessibility (A11y)\n\nThis directive will prevent child elements of the sliding element from being focusable when closed. Other than that it does not handle any other aspects of a11y such as adding or removing of `aria` attributes. Check out the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/) for more information. The most basic setup is to use `aria-expanded` and `aria-controls` as shown in the above [example](#usage).\n\n## Browser Support\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eiOS Safari |\n| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE11, Edge                                                                                                                                                                                                     | ✅                                                                                                                                                                                                               | ✅                                                                                                                                                                                                           | ✅                                                                                                                                                                                                           | \u003e iOS 9                                                                                                                                                                                                                      |\n\n## Support\n\nPlease [open an issue](https://github.com/phegman/v-show-slide/issues/new/) for support.\n\n## Contributing\n\nPlease contribute using [Github Flow](https://guides.github.com/introduction/flow/). Create a branch, add commits, and [open a pull request](https://github.com/phegman/v-show-slide/compare).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphegman%2Fv-show-slide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphegman%2Fv-show-slide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphegman%2Fv-show-slide/lists"}