{"id":13406928,"url":"https://github.com/mattrothenberg/vue-overdrive","last_synced_at":"2025-05-16T17:07:48.426Z","repository":{"id":29353090,"uuid":"120929110","full_name":"mattrothenberg/vue-overdrive","owner":"mattrothenberg","description":"Super easy magic-move transitions for Vue apps","archived":false,"fork":false,"pushed_at":"2022-12-07T20:28:30.000Z","size":1798,"stargazers_count":681,"open_issues_count":23,"forks_count":29,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-09T19:11:23.833Z","etag":null,"topics":["animations","vue","vue-router","vuejs"],"latest_commit_sha":null,"homepage":"","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/mattrothenberg.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":"2018-02-09T16:30:53.000Z","updated_at":"2025-03-20T21:49:05.000Z","dependencies_parsed_at":"2023-01-14T14:45:14.171Z","dependency_job_id":null,"html_url":"https://github.com/mattrothenberg/vue-overdrive","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattrothenberg%2Fvue-overdrive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattrothenberg%2Fvue-overdrive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattrothenberg%2Fvue-overdrive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattrothenberg%2Fvue-overdrive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattrothenberg","download_url":"https://codeload.github.com/mattrothenberg/vue-overdrive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254573588,"owners_count":22093731,"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":["animations","vue","vue-router","vuejs"],"created_at":"2024-07-30T19:02:43.294Z","updated_at":"2025-05-16T17:07:48.355Z","avatar_url":"https://github.com/mattrothenberg.png","language":"Vue","funding_links":[],"categories":["Vue","UI Utilities [🔝](#readme)","UI实用程序","Components \u0026 Libraries","UI Utilities"],"sub_categories":["动画","UI Utilities","Animation"],"readme":"### Heads up!\nThe fate of this repo is uncertain. I recommend using my new library, [`vue-flip-toolkit`](https://github.com/mattrothenberg/vue-flip-toolkit) for all of your magic-move transition needs.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"120\" src=\"https://dzwonsemrish7.cloudfront.net/items/0P31353w2O3M130M2K3r/Artboard%201.png\"/\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003evue-overdrive\u003c/h2\u003e\n\u003ch5 align=\"center\"\u003eSuper easy magic-move transitions for Vue apps, powered by Ramjet\u003c/h5\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://badge.fury.io/js/vue-overdrive\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/vue-overdrive.svg\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n## Project Install\n\n``` bash\n# npm\nnpm install vue-overdrive\n```\n\n``` bash\n# yarn\nyarn add vue-overdrive\n```\n\n## Warning!\nCurrently, `vue-overdrive` isn't able to morph between shapes with percentage-based `border-radius` values. You'll need to use a pixel-based value, or you'll get a nasty `TypeError`. The issue is being tracked here: https://github.com/Rich-Harris/ramjet/issues/57\n\n## Examples\n\n\u003cimg src=\"https://thumbs.gfycat.com/GlamorousThoroughHumpbackwhale-size_restricted.gif\" alt=\"Material\" width=\"320\"/\u003e\n\n### 1) Morph Shapes ([source](examples/src/router/index.js#L22-L38))\nhttps://vue-overdrive.netlify.com/#/shapes\n\n\u003cimg src=\"https://imgur.com/YRwM2T8.gif\" alt=\"Shape morph\" width=\"320\"/\u003e\n\n### 2) Material-esque transformation ([source](examples/src/router/index.js#L41-L53))\nhttps://vue-overdrive.netlify.com/#/libraries\n\n\u003cimg src=\"https://imgur.com/B6BYxRv.gif\" alt=\"Material transformation\" width=\"320\"/\u003e\n\n### 3) iOS-inspired icon effect ([source](examples/src/router/index.js#L54-L65))\nhttps://vue-overdrive.netlify.com/#/icons\n\n\u003cimg src=\"https://imgur.com/vrb7QQ2.gif\" alt=\"iOS icon effect\" width=\"320\"/\u003e\n\n\n## What is it?\nA Vue.js port of the amazing [React Overdrive](https://github.com/berzniz/react-overdrive), using [Ramjet](https://github.com/Rich-Harris/ramjet) under the hood.\n\n## How does it work?\nJust like with React Overdrive, wrap any two elements in a \u003coverdrive id=\"\"\u003e\u003c/overdrive\u003e component. Add the same id to create a transition between the elements.\n\n### Import and install\n\n```js\nimport Overdrive from 'vue-overdrive'\nVue.use(Overdrive)\n```\n\nor\n\n```js\nimport { VOverdrive } from 'vue-overdrive'\n\n// Register the component locally\ncomponents: {\n  'overdrive': VOverdrive\n}\n```\n\n### Set up (at least) two different routes with Vue Router\n\nInside your routes file –\n```js\n{\n  path: '/circle',\n  name: 'Circle',\n  component: Circle\n},\n{\n  path: '/rectangle',\n  name: 'Rectangle',\n  component: Rectangle \n}\n```\n\n### Scaffold your components\n\nIn `Circle.vue`:\n```vue\n\u003ctemplate\u003e\n  \u003coverdrive id=\"element\" :easing=\"easing\" :duration=\"350\"\u003e\n    \u003cdiv class=\"circle\"\u003e\u003c/div\u003e\n  \u003c/overdrive\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport * as easing from 'eases/quart-in-out' // Bring 'yr own easing functions!\nexport default {\n  name: 'el-circle',\n  data () {\n    return {\n      easing\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n  .circle {\n    width: 100px;\n    height: 100px;\n    border-radius: 50%;\n    background: blue;\n    float: left;\n  }\n\u003c/style\u003e\n\n```\n\nAnd in `Rectangle.vue` –\n\n```vue\n\u003ctemplate\u003e\n  \u003coverdrive id=\"element\"\u003e\n    \u003cdiv class=\"rectangle\"\u003e\u003c/div\u003e\n  \u003c/overdrive\u003e\n\u003c/template\u003e\n```\n\n### Usage with `v-if`\nIf you're not using Vue Router (and instead using Vue's built-in `v-if` directive), be sure to specify a unique `key` prop on each instance of `\u003coverdrive\u003e`\n\n```vue\n\u003coverdrive key=\"a\" id=\"window\" :duration=\"450\" v-if=\"!windowOpen\"\u003e\n  \u003c!-- some element --\u003e\n\u003c/overdrive\u003e\n\u003coverdrive key=\"b\" id=\"window\" :duration=\"450\" v-if=\"windowOpen\"\u003e\n  \u003c!-- some element --\u003e\n\u003c/overdrive\u003e\n```\n\n### Customize it (API)\n\n\n| Prop     \t| Description                                          \t| Default Value   \t|\n|----------\t|------------------------------------------------------\t|-----------------\t|\n| id       \t| Required. A unique string or number to identify the component. \t|                 \t|\n| tag      \t| Wrapping element type                                \t| `div`           \t|\n| duration \t| Animation duration (in milliseconds)                 \t| `250`           \t|\n| easing   \t| Easing Function (must pass a function)               \t| `ramjet.linear` \t|\n\n| Event            \t| Description                                   \t|\n|------------------\t|-----------------------------------------------\t|\n| `@animation-end` \t| Fires once the ramjet animation has completed \t|\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattrothenberg%2Fvue-overdrive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattrothenberg%2Fvue-overdrive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattrothenberg%2Fvue-overdrive/lists"}