{"id":13465171,"url":"https://github.com/BinarCode/vue2-transitions","last_synced_at":"2025-03-25T13:33:10.652Z","repository":{"id":27963553,"uuid":"115724661","full_name":"BinarCode/vue2-transitions","owner":"BinarCode","description":"✨ Reusable Vue 2 transition components","archived":false,"fork":false,"pushed_at":"2022-12-08T14:47:23.000Z","size":24996,"stargazers_count":788,"open_issues_count":35,"forks_count":73,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-19T19:48:07.594Z","etag":null,"topics":["components","transitions","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://binarcode.github.io/vue2-transitions/","language":"Vue","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/BinarCode.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}},"created_at":"2017-12-29T13:29:55.000Z","updated_at":"2025-02-11T21:33:46.000Z","dependencies_parsed_at":"2022-09-12T12:03:32.191Z","dependency_job_id":null,"html_url":"https://github.com/BinarCode/vue2-transitions","commit_stats":null,"previous_names":["cristijora/vue2-transitions"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BinarCode%2Fvue2-transitions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BinarCode%2Fvue2-transitions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BinarCode%2Fvue2-transitions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BinarCode%2Fvue2-transitions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BinarCode","download_url":"https://codeload.github.com/BinarCode/vue2-transitions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245471305,"owners_count":20620917,"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":["components","transitions","vuejs","vuejs2"],"created_at":"2024-07-31T14:01:02.437Z","updated_at":"2025-03-25T13:33:09.368Z","avatar_url":"https://github.com/BinarCode.png","language":"Vue","funding_links":[],"categories":["Vue","UI Utilities"],"sub_categories":["Animation"],"readme":"# vue2-transitions\n\n## [Demo](https://binarcode.github.io/vue2-transitions)\n## [Codesandbox](https://codesandbox.io/s/v80qxp7nwy)\n\n[![NPM version](https://img.shields.io/npm/v/vue2-transitions.svg?style=flat)](https://npmjs.com/package/vue2-transitions) [![NPM downloads](https://img.shields.io/npm/dm/vue2-transitions.svg?style=flat)](https://npmjs.com/package/vue2-transitions) [![CircleCI](https://circleci.com/gh/cristij/vue2-transitions/tree/master.svg?style=shield)](https://circleci.com/gh/cristij/vue2-transitions/tree/master)\n\n✨ Reusable component transitions\n\n## Why :question:\n - Brings only the code that you need. \n   *Many alternative solutions import the whole animate.css library. Vue2-transitions is minimalistic and lets\n   you import only the transitions that you need in your app*\n   \n   Each transition component has **~2kb** (non-minified js+css or **~400 bytes** gzipped) and you can import only the ones you really need.\n   \n - Configurable.\n   *You can configure animation enter and leave durations as well as all the props of the native Vue `transition` components through props*\n   \n - Easy to use.\n   *No extra classes*\n \n## Install :coffee:\n\n```bash\nnpm i vue2-transitions\nyarn add vue2-transitions\n```\n\nCDN: [UNPKG](https://unpkg.com/vue2-transitions/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue2-transitions/) (available as `window.Vue2Transitions`)\n\n## Usage :rocket:\n\n```vue\n\u003ctemplate\u003e\n   \u003cfade-transition\u003e\n      \u003cdiv class=\"box\" v-show=\"show\"\u003e\n        \u003cp\u003eFade transition\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/fade-transition\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport {FadeTransition} from 'vue2-transitions'\n\nexport default {\n  components: {\n    FadeTransition\n  }\n}\n\u003c/script\u003e\n```\n\n## Global usage\n```js\nimport Transitions from 'vue2-transitions'\nVue.use(Transitions)\n```\n\n## List of available transitions\n- FadeTransition\n- ZoomCenterTransition\n- ZoomXTransition\n- ZoomYTransition\n- CollapseTransition\n- ScaleTransition\n- SlideXLeftTransition\n- SlideXRightTransition\n- SlideYUpTransition\n- SlideYDownTransition\n\n## Props \n```js\nprops: {\n  /**\n   * Transition duration. Number for specifying the same duration for enter/leave transitions\n   * Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave\n   */\n  duration: {\n    type: [Number, Object],\n    default: 300\n  },  \n  /**\n   * Whether the component should be a `transition-group` component.\n   */\n  group: Boolean,\n  /**\n   * Transition tag, in case the component is a `transition-group`\n   */\n  tag: {\n    type: String,\n    default: 'span'\n  },\n  /**\n   *  Transform origin property https://tympanus.net/codrops/css_reference/transform-origin/.\n   *  Can be specified with styles as well but it's shorter with this prop\n   */\n  origin: {\n    type: String,\n    default: ''\n  },\n  /**\n   * Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks\n   */\n  styles: {\n    type: Object,\n    default: () =\u003e {\n      return {\n        animationFillMode: 'both',  \n        animationTimingFunction: 'ease-out'\n      }\n    }\n  }\n}\n```\n\n## Group transitions\nEach transition can be used as a `transition-group` by adding the `group` prop to one of the desired transitions.\n```html\n\u003cfade-transition group\u003e\n   \u003c!--keyed children here--\u003e\n\u003c/fade-transition\u003e\n```\nGotchas/things to watch:\n1. Elements inside `group` transitions should have `display: inline-block` or must be placed in a flex context:\n[Vue.js docs reference](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions)\n2. Each transition has a `move` class [move class docs](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions).\nUnfortunately the duration for the move transition cannot be configured through props. By default each transition has a `move` class associated \nwith `.3s` transition duration:\n\n - Zoom \n   ```css\n    .zoom-move{\n      transition: transform .3s ease-out;\n    }\n   ```\n - Slide \n   ```css\n     .slide-move{\n       transition: transform .3s ease-out;\n     }\n   ```\n - Scale\n   ```css\n    .scale-move{\n        transition: transform .3s cubic-bezier(.25,.8,.50,1);\n      }\n   ``` \n - Fade\n   ```css\n   .fade-move{\n       transition: transform .3s ease-out;\n     }\n    ``` \nIf you want to configure the duration, just redefine the class for the transition you use with the desired duration.\n\n\n## Contribution\n\n### Defining a new transition\nThe codebase is fairly simple and contains mostly `.vue` components. If you want to add a new transition to the collection follow these steps:\n1. Fork the repo.\n2. Create a new branch.\n3. Create a new `.vue` file (together with a folder if necessary)\n4. Define the transition.\n   ```html\n    \u003ctemplate\u003e\n      \u003ccomponent :is=\"componentType\"\n                  v-bind=\"$attrs\"\n                  v-on=\"hooks\"\n                  enter-active-class=\"enterAnimationClassHere\"\n                  move-class=\"move-class\"\n                  leave-active-class=\"leaveAnimationClassHere\"\u003e\n        \u003cslot\u003e\u003c/slot\u003e\n      \u003c/component\u003e\n    \u003c/template\u003e\n    \u003cscript\u003e\n      import {baseTransition} from '../mixins/index.js'\n      export default {\n        name: 'transition-name-here',\n        mixins: [baseTransition]\n      }\n    \u003c/script\u003e\n    \u003cstyle\u003e\n     // Your styles for animations here.\n    \u003c/style\u003e\n   ```\n5. Import the transition in `src/index.js` and place it in the `export default` object.\n6. Add the name of the new transition (camelCase) in the `transitionOptions` array inside `example/App.vue`\n\nBesides the properties described above, you can pass in any other [Transition props or events](https://vuejs.org/v2/api/#transition)\n**Note** Overriding hooks (especially `beforeEnter` or `beforeLeave`) may cause unwanted effects.\n\n## License\n\nMIT \u0026copy; [cristijora](https://github.com/cristijora)\n\n## Special thanks to\n\n@euvl (The UI for list transitions in the demo is inspired by [vue-js-grid demo](https://github.com/euvl/vue-js-grid) )  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBinarCode%2Fvue2-transitions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBinarCode%2Fvue2-transitions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBinarCode%2Fvue2-transitions/lists"}