{"id":19252731,"url":"https://github.com/morevm/vue-transitions","last_synced_at":"2025-10-24T17:41:46.186Z","repository":{"id":38021854,"uuid":"471438987","full_name":"MorevM/vue-transitions","owner":"MorevM","description":"Interface transitions library for Vue 2/3","archived":false,"fork":false,"pushed_at":"2025-02-01T04:20:56.000Z","size":2507,"stargazers_count":214,"open_issues_count":7,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-12T09:24:24.056Z","etag":null,"topics":["animations","transitions","transitions-library","vue","vue2","vue3"],"latest_commit_sha":null,"homepage":"https://morevm.github.io/vue-transitions/","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/MorevM.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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":"2022-03-18T16:24:30.000Z","updated_at":"2025-04-11T01:34:36.000Z","dependencies_parsed_at":"2024-04-27T05:32:16.684Z","dependency_job_id":"8c482fc7-9030-4979-8eb5-ef32fbb7409e","html_url":"https://github.com/MorevM/vue-transitions","commit_stats":{"total_commits":330,"total_committers":4,"mean_commits":82.5,"dds":0.5212121212121212,"last_synced_commit":"25d83b6492a39ec1e9254b0bd51868228454b06a"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fvue-transitions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fvue-transitions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fvue-transitions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fvue-transitions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MorevM","download_url":"https://codeload.github.com/MorevM/vue-transitions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254384988,"owners_count":22062422,"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","transitions","transitions-library","vue","vue2","vue3"],"created_at":"2024-11-09T18:28:13.717Z","updated_at":"2025-10-24T17:41:41.167Z","avatar_url":"https://github.com/MorevM.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Utilities"],"readme":"![Promo image of @morev/vue-transitions package](./.github/images/header.svg)\n\n![Stability of \"master\" branch](https://img.shields.io/github/actions/workflow/status/MorevM/vue-transitions/build.yaml?branch=master)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n![Last commit](https://img.shields.io/github/last-commit/morevm/vue-transitions)\n![Release version](https://img.shields.io/github/v/release/morevm/vue-transitions?include_prereleases)\n![GitHub Release Date](https://img.shields.io/github/release-date/morevm/vue-transitions)\n![Keywords](https://img.shields.io/github/package-json/keywords/morevm/vue-transitions)\n\n# @morev/vue-transitions\n\nReusable interface transitions for `Vue 2` and `Vue 3` with no CSS needed ❤️\n\n✔️ Highly customizable via props; \\\n✔️ Correctly works with grid/flex layouts in `group` mode; \\\n✔️ Considers initial styles of animated elements such as `transform` or `opacity`; \\\n✔️ Even more easy-to-use with universal `Nuxt 2` and `Nuxt 3` module.\n\n[DEMO / Playground](https://morevm.github.io/vue-transitions/)\n\n## Table of contents:\n\n* [Demo](https://morevm.github.io/vue-transitions/)\n* [Installation](#installation)\n  * [Requirements](#-requirements)\n  * [Using `yarn`](#using-yarn)\n  * [Using `npm`](#using-npm)\n  * [Using `pnpm`](#using-pnpm)\n  * [Using `bun`](#using-bun)\n* [Usage](#usage)\n  * [Global registration](#global-registration)\n    * [Custom options](#custom-options)\n  * [Direct import of components](#direct-import-of-components)\n  * [Usage with Nuxt](#usage-with-nuxt)\n* [IntelliSense](#intellisense)\n* [List of transitions](#list-of-transitions)\n  * [TransitionFade](#transitionfade)\n  * [TransitionExpand](#transitionexpand)\n  * [TransitionSlide](#transitionslide)\n  * [TransitionScale](#transitionscale)\n* [Props](#props)\n  * [Common props](#common-props)\n  * [Unique props of `TransitionExpand`](#unique-props-of-transitionexpand)\n  * [Unique props of `TransitionSlide`](#unique-props-of-transitionslide)\n  * [Unique props of `TransitionScale`](#unique-props-of-transitionscale)\n* [Events](#events)\n\n## Installation\n\n### ❗ Requirements\n\n* Node version: `\u003e= 18.0.0`\n* Nuxt version (if used): `\u003e= 2.17.0 || \u003e= 3.5.0`\n\n**The plugin will not work if you are using a Node or Nuxt version less than the specified ones.**\n\n---\n\n### Using `yarn`\n\n```bash\nyarn add @morev/vue-transitions\n```\n\n---\n\n### Using `npm`\n\n```bash\nnpm install @morev/vue-transitions\n```\n\n---\n\n### Using `pnpm`\n\n```bash\npnpm add @morev/vue-transitions\n```\n\n❗ **Important note for `pnpm\u003e=10.0.0` users**\n\nThe package relies on `postinstall` hook to determine the Vue version and provide proper components. \\\nBy default, [pnpm@10.0.0 does not execute lifecycle hooks](https://github.com/pnpm/pnpm/releases/tag/v10.0.0),\nso to make it work you need to add the package to the [`pnpm.onlyBuiltDependencies`](https://pnpm.io/package_json#pnpmonlybuiltdependencies)\nfield in your `package.json` before installing:\n\n```json\n{\n  \"pnpm\": {\n    \"onlyBuiltDependencies\": [\"@morev/vue-transitions\"]\n  }\n}\n```\n\nIf you install the package before adding the entry, you have to set Vue version you are using manually using the command\n`vue-transitions-version-switch`:\n\n```sh\n# set Vue 3\npnpm vue-transitions-version-switch 3\n\n# Set Vue 2\npnpm vue-transitions-version-switch 2\n```\n\n*Even with the command launched, it's important to add the `pnpm.onlyBuiltDependencies` field so that everything works well in future installations.*\n\n---\n\n### Using `bun`\n\n```bash\nbun add @morev/vue-transitions\n```\n\n❗ **Important note for `Bun` users**\n\nThe package relies on `postinstall` hook to determine the Vue version and provide proper components. \\\nBy default, [Bun does not execute lifecycle hooks](https://bun.sh/docs/cli/install#lifecycle-scripts),\nso to make it work you need to manually add the package to the `trustedDependencies` after installing and run `bun install` again.\n\n```json\n{\n  \"trustedDependencies\": [\"@morev/vue-transitions\"]\n}\n```\n\n---\n\n## Usage\n\n\u003e You may skip the following paragraphs if you are going to use the library with Nuxt. \\\n\u003e [Go to \"Usage with Nuxt\" section](#usage-with-nuxt).\n\nPackage exports two versions of components:\n\n* Version for `Vue2` available with named export `/vue2`\n* Version for `Vue3` available with named export `/vue3`\n\nHowever, there is also a default export mapped to local version of Vue being used. \\\nUnderhood, it utilized the [postinstall](https://docs.npmjs.com/cli/v8/using-npm/scripts) npm hook. \\\nAfter installing the package, the script will start to check the installed Vue version\nand redirect the exports to based on the local Vue version.\n\nIt feels pretty robust, but if you're worried about, prefer an explicit named import according to the version you're using.\n\n\u003e By the way, you can change default export after installation: just run the command `vue-transitions-version-switch \u003cversion\u003e`\n\u003e\n\u003e * Example using `yarn`: `yarn vue-transitions-version-switch 2`\n\u003e * Example using `npx`: `npx vue-transitions-version-switch 3`\n\n### Global registration\n\n#### Using `Vue3`\n\n```js\nimport { createApp } from 'vue';\nimport { plugin as vueTransitionsPlugin } from '@morev/vue-transitions';\nimport '@morev/vue-transitions/styles';\n\nconst app = createApp(App);\n\napp.use(vueTransitionsPlugin({\n  // Plugin options (optional, described below)\n}));\n```\n\n#### Using `Vue2`\n\n```js\nimport Vue from 'vue';\nimport { plugin as vueTransitionsPlugin } from '@morev/vue-transitions';\nimport '@morev/vue-transitions/styles';\n\nVue.use(vueTransitionsPlugin, {\n  // Plugin options (optional, described below)\n});\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003e😥 I got an error \"This dependency was not found\"\u003c/summary\u003e\n\n  For environments that can't resolve `exports` field (such as [Nuxt 2](https://nuxtjs.org/))\n  just replace styles import with direct path to file:\n\n  ```diff\n  - import '@morev/vue-transitions/styles';\n  + import '@morev/vue-transitions/dist/index.css';\n  ```\n\n\u003c/details\u003e\n\n---\n\n#### Custom options\n\n\u003e It's recommended to use the named export `plugin` instead of default export when setting custom options to get proper type information.\n\nCustom options allows to change default property values. \\\nTo change the defaults, pass the `defaultProps` key to the plugin settings, listing the key-value pairs of desired props. \\\nYou may also change default props per-component, to do so just pass the `componentDefaultProps` key to plugin settings.\n\n\u003e **Important**: these props are not validated, so make sure you define them with right values.\n\n```js\nimport { createApp } from 'vue';\nimport { plugin as vueTransitionsPlugin } from '@morev/vue-transitions';\nimport '@morev/vue-transitions/styles';\n\nconst app = createApp(App);\n\napp.use(vueTransitionsPlugin({\n  // Default duration for all transitions now is `200`\n  defaultProps: {\n    duration: 200,\n  },\n  // But for `\u003ctransition-expand\u003e` default duration is `500`\n  componentDefaultProps: {\n    TransitionExpand: {\n      duration: 500,\n    }\n  }\n}));\n```\n\n---\n\n### Direct import of components\n\n```vue\n\u003ctemplate\u003e\n  \u003ctransition-fade\u003e\n    \u003cdiv v-if=\"isVisible\" class=\"box\"\u003e\n      Fade transition\n    \u003c/div\u003e\n  \u003c/transition-fade\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { TransitionFade } from '@morev/vue-transitions';\n\n  export default {\n    components: { TransitionFade },\n  };\n\u003c/script\u003e\n```\n\n### Usage with Nuxt\n\nThe library exports a ready-to-use universal module for Nuxt 2 and 3 via named export `/nuxt`. \\\nUsing Nuxt, it's recommended to use the module instead of manual installation because:\n\n1. Nuxt allows to auto-import components on demand instead of global registration, which is a more performant option.\n1. It's just faster to do :)\n\nTo use, add `@morev/vue-transitions/nuxt` to the `modules` section of your `nuxt.config.ts` / `nuxt.config.js`:\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\n    '@morev/vue-transitions/nuxt',\n  ],\n  vueTransitions: {\n    // The same options as in the plugin itself.\n    // You will get an autocomplete using Nuxt 3.\n  }\n});\n```\n\nEnjoy you transition components! 🎉\n\n## IntelliSense\n\n\u003e **You may skip this section using Nuxt module - it does it for you.**\n\u003e\n\u003e This section only applies to [VSCode](https://code.visualstudio.com/) setup and global registration of components.\n\n### With Vue 2\n\nUsing Vue 2 with [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)\nextension installed all components should provide hints as it, no actions required:\n\n![Example of IntelliSense with VSCode and Vetur](./.github/images/intellisense-vue2.jpg)\n\n### With Vue 3\n\nUsing Vue 3 with [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)\nextension installed all components should provide hints as it, no actions required:\n\n![Example of IntelliSense with VSCode and Volar](./.github/images/intellisense-vue3.jpg)\n\n## List of transitions\n\n### TransitionFade\n\nBasic transition that changes element `opacity`. Pretty simple.\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow code\u003c/summary\u003e\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003ctransition-fade\u003e\n      \u003cdiv v-if=\"isVisible\"\u003e...\u003c/div\u003e\n    \u003c/transition-fade\u003e\n  \u003c/template\u003e\n\n  \u003cscript\u003e\n    import { TransitionFade } from '@morev/vue-transitions';\n\n    export default {\n      components: { TransitionFade },\n    };\n  \u003c/script\u003e\n  ```\n\n\u003c/details\u003e\n\n---\n\n### TransitionExpand\n\nTransition that manipulates with actual element size. \\\nIf you are old enough you may know this transition as jQuery [`slideUp/slideDown`](https://api.jquery.com/slideup/). \\\nIt also can work with `X` axis like `slideLeft` and `slideRight`\n(although it's hard for me to come up with a scenario where it will really be needed).\n\nHas [unique prop](#unique-props-of-transitionexpand): `axis`\n\n---\n\n### TransitionSlide\n\nTransition that manipulates with element position via `transform: translate()`. \\\nIt requires `offset` prop to calculate desired element position and can work with percentage values.\n\n\u003cdetails\u003e\n  \u003csummary\u003eExamples how to work with \u003ccode\u003eoffset\u003c/code\u003e prop\u003c/summary\u003e\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003c!--\n      Element will fade in and fade out to top.\n      Initial transform is `transform: translate(0, -16px)`\n    --\u003e\n    \u003ctransition-slide :offset=\"[0, -16]\"\u003e\u003c/transition-slide\u003e\n\n    \u003c!--\n      Element will fade in and fade out to bottom left side.\n      Initial transform is `transform: translate(-16px, 16px)`\n    --\u003e\n    \u003ctransition-slide :offset=\"[-16, 16]\"\u003e\u003c/transition-slide\u003e\n\n    \u003c!--\n      Element will fade in and fade out to right,\n      and the offset will be relative to the element width itself.\n      Initial transform is `transform: translate(100%, 0)`\n    --\u003e\n    \u003ctransition-slide :offset=\"['100%', 0]\"\u003e\u003c/transition-slide\u003e\n\n    \u003c!--\n      Element will fade in from top and fade out to bottom,\n      and the offset will be relative to the element height itself.\n\n      Transform before element appears: `transform: translate(0, -100%)`\n      Transform when element disappears: `transform: translate(0, 100%)`\n    --\u003e\n    \u003ctransition-slide\n      :offset=\"{\n        enter: [0, '-100%'],\n        leave: [0, '100%']\n      }\"\n    \u003e\u003c/transition-slide\u003e\n  \u003c/template\u003e\n  ```\n\n\u003c/details\u003e\n\nIt respects the transform applied to element itself via CSS and merges it with defined offset. \\\nIt's very useful, for example, when you are trying to make centered dropdown.\n\n\u003cdetails\u003e\n  \u003csummary\u003e👀 Show example of `transform` merging\u003c/summary\u003e\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003cdiv class=\"block\"\u003e\n      \u003c!--\n        In this case, given the CSS styles,\n        initial transform will be calculated to `translate(-50%, -16px)`\n      --\u003e\n      \u003ctransition-slide :offset=\"[0, -16]\"\u003e\n        \u003cdiv class=\"block__dropdown\" v-if=\"isVisible\"\u003e\n          ...\n        \u003c/div\u003e\n      \u003c/transition-slide\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\n  \u003cstyle\u003e\n    .block {\n      position: relative;\n    }\n\n    .block__dropdown {\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  \u003c/style\u003e\n  ```\n\n\u003c/details\u003e\n\nHas [unique prop](#unique-props-of-transitionslide): `offset`\n\n---\n\n### TransitionScale\n\nTransition that manipulates with element `transform: scale()`. \\\nBy default, it scales element from `scale(1)` to `scale(0)`, but this behavior can be customized via `:scale` prop. \\\nIt works with different axis via [axis](#unique-props-of-transitionscale) prop.\n\nHas [unique props](#unique-props-of-transitionscale): `scale`, `axis`, `origin`\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow example of code\u003c/summary\u003e\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003c!--\n      This element appears in `x` axis and disappears in `y`\n    --\u003e\n    \u003ctransition-scale :axis=\"{ enter: 'x', leave: 'y' }\"\u003e\u003c/transition-scale\u003e\n\n    \u003c!--\n      This element behaves like the `transition-expand`,\n      but touches only `transform` property\n    --\u003e\n    \u003ctransition-scale transform-origin=\"50% 0%\"\u003e\u003c/transition-scale\u003e\n\n    \u003c!--\n      This element scales just a little when fading in/out.\n    --\u003e\n    \u003ctransition-scale :scale=\".8\"\u003e\u003c/transition-scale\u003e\n\n  \u003c/template\u003e\n  ```\n\n\u003c/details\u003e\n\n## Props\n\n### Common props\n\nThose properties are related to each transition:\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003egroup\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Whether the component should be a [`transition-group`](https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions) component.\n\n  ```ts\n  export type TransitionGroup = boolean; // Default: false\n  ```\n\n  **Example:**\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003cdiv\u003e\n      \u003c!--\n        To animate a list of items, use `group` prop.\n        ⚠️ Don't forget you should pass the `:key` to each item in this case.\n      --\u003e\n      \u003ctransition-fade group\u003e\n        \u003cdiv v-for=\"item in items\" :key=\"item.id\"\u003e...\u003c/div\u003e\n      \u003c/transition-fade\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003etag\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Transition tag, in the case of using a [`transition-group`](https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions) component.\n\n  ```ts\n  export type TransitionTag = string; // Default: 'span'\n  ```\n\n  **Example:**\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003cdiv\u003e\n      \u003c!--\n        Passing the tag renders transition component with it.\n        It's suitable, for example, for rendering semantic lists:\n      --\u003e\n      \u003ctransition-fade group tag=\"ul\"\u003e\n        \u003cli v-for=\"item in items\" :key=\"item.id\"\u003e...\u003c/li\u003e\n      \u003c/transition-fade\u003e\n\n      \u003c!-- ✨ Rendered HTML: --\u003e\n      \u003cul\u003e\n        \u003cli\u003e...\u003c/li\u003e\n        \u003cli\u003e...\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eappear\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Whether to apply a transition on the initial render of a node.\n  Acts literally the same as original\n  [Vue transition appear prop](https://v2.vuejs.org/v2/guide/transitions.html?redirect=true#Transitions-on-Initial-Render)\n\n  ```ts\n  export type TransitionAppear = boolean; // Default: undefined\n  ```\n\n  **Example:**\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003cdiv\u003e\n      \u003c!--\n        This element appears when mounted if `isVisible` is `true` by default.\n      --\u003e\n      \u003ctransition-fade appear\u003e\n        \u003cdiv v-if=\"isVisible\"\u003e...\u003c/div\u003e\n      \u003c/transition-fade\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003emode\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  [Transition mode](https://v2.vuejs.org/v2/guide/transitions.html?redirect=true#Transition-Modes).\n\n  ```ts\n  export type TransitionMode = 'in-out' | 'out-in' | undefined; // Default: undefined\n  ```\n\n  **Example:**\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003cdiv\u003e\n      \u003c!--\n        Current element transitions out first, then when complete,\n        the new element transitions in.\n      --\u003e\n      \u003ctransition-slide mode=\"out-in\"\u003e\n        \u003ccomponent :is=\"currentComponent\"\u003e...\u003c/component\u003e\n      \u003c/transition-slide\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eduration\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Transition animation duration, ms. \\\n  If an object given then `enter` and `leave` values will be used for enter and leave transition respectively.\n\n  ```ts\n  // Default: 300\n  export type TransitionDuration = number | { enter: number, leave: number }\n  ```\n\n  **Example:**\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003cdiv\u003e\n      \u003c!--\n        If single value provided, the passed amount of milliseconds\n        applied to enter and leave animations both.\n        This element will appear and disappear within 500ms:\n      --\u003e\n      \u003ctransition-fade :duration=\"500\"\u003e\n        \u003cdiv v-if=\"isVisible\"\u003e...\u003c/div\u003e\n      \u003c/transition-fade\u003e\n\n      \u003c!--\n        If an object given, it SHOULD have `enter` and `leave` keys.\n        This element appears in 200ms and disappears within 500ms:\n      --\u003e\n      \u003ctransition-fade :duration=\"{ enter: 200, leave: 500 }\"\u003e\n        \u003cdiv v-if=\"isVisible\"\u003e...\u003c/div\u003e\n      \u003c/transition-fade\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003emove-duration\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Duration of animation of elements positions changing, in the case of using a `transition-group`.\n\n  Although Vue does not have a native way to set the duration of the move animation via props, this task can be done using\n  [CSS Custom Properties](https://css-tricks.com/a-complete-guide-to-custom-properties/).\n\n  \u003cdetails\u003e\n    \u003csummary\u003e👀 Show explanation\u003c/summary\u003e\n    \u003cbr /\u003e\n\n    ```html\n    \u003c!-- This way it can be set dynamically --\u003e\n    \u003cdiv style=\"--move-duration: 300ms;\"\u003e\n      \u003cdiv class=\"scale-move\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"scale-move\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    ```\n\n    ```css\n    .scale-move {\n      transition-duration: var(--move-duration, 300ms);\n    }\n    ```\n\n  \u003c/details\u003e\n\n  ```ts\n  // Default: 300\n  export type TransitionMoveDuration = number;\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003edelay\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Transition animation delay, ms.\\\n  If an object given then `enter` and `leave` values will be used for enter and leave transition respectively.\n\n  ```ts\n  // Default: 300\n  export type TransitionDelay = number | { enter: number, leave: number };\n  ```\n\n  **Example:**\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003cdiv\u003e\n      \u003c!--\n        If single value provided, then enter and leave animations will wait\n        for given amount of milliseconds before run.\n        This element will appear and disappear 100ms after\n        `isVisible` property changes:\n      --\u003e\n      \u003ctransition-fade :delay=\"100\"\u003e\n        \u003cdiv v-if=\"isVisible\"\u003e...\u003c/div\u003e\n      \u003c/transition-fade\u003e\n\n      \u003c!--\n        If an object given, it SHOULD have `enter` and `leave` keys.\n        This element appears immediately and disappears 200ms after\n        `isVisible` property changes:\n      --\u003e\n      \u003ctransition-fade :duration=\"{ enter: 0, leave: 300 }\"\u003e\n        \u003cdiv v-if=\"isVisible\"\u003e...\u003c/div\u003e\n      \u003c/transition-fade\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eeasing\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Transition animation easing. Should be a valid CSS transition timing function. \\\n  If an object given then `enter` and `leave` values will be used for enter and leave transition respectively.\n\n  ```ts\n  export type TransitionEasing = string; // Default: 'cubic-bezier(.25, .8, .5, 1)'\n  ```\n\n  **Example:**\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003cdiv\u003e\n      \u003c!--\n        If single value provided, then enter and leave animations will use it:\n      --\u003e\n      \u003ctransition-fade easing=\"ease-out\"\u003e\n        \u003cdiv v-if=\"isVisible\"\u003e...\u003c/div\u003e\n      \u003c/transition-fade\u003e\n\n      \u003c!--\n        If an object given, it SHOULD have `enter` and `leave` keys.\n        This element uses custom animation known as `bounce-in` for entering\n        and simple `ease-out` curve for leaving:\n      --\u003e\n      \u003ctransition-fade\n        :easing=\"{\n          enter: 'cubic-bezier(0.6, 0, 0.4, 2)',\n          leave: 'ease-out'\n        }\"\n      \u003e\n        \u003cdiv v-if=\"isVisible\"\u003e...\u003c/div\u003e\n      \u003c/transition-fade\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eno-opacity\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Whether to **not** animate the element `opacity`.\n\n  By default, each transition manipulates `opacity` in addition to the main property. \\\n  However, sometimes this is not required - for example, when implementing modal panels that appear from the edge of the screen.\n\n  \u003e The prop is obviously not applicable to `transition-fade` component.\n\n\n  ```ts\n  export type TransitionNoOpacity = boolean; // Default: false\n  ```\n\n  **Example:**\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003cdiv\u003e\n      \u003c!--\n        This panel appears from the right edge of the screen,\n        while its transparency remains unchanged.\n      --\u003e\n      \u003ctransition-slide :offset=\"['100%', 0]\" no-opacity\u003e\n        \u003cdiv class=\"panel\" v-if=\"isVisible\"\u003e...\u003c/div\u003e\n      \u003c/transition-slide\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\n  \u003cstyle\u003e\n    .panel {\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      background: #ffffff;\n      width: 400px;\n    }\n  \u003c/style\u003e\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eno-move\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Whether to **not** animate elements positions changing, in the case of using a `transition-group`.\n\n  By default, when using `group` mode, when an element is removed, the remaining elements smoothly change their position. \\\n  They are given absolute positioning and dropped out of the flow, so the parent container collapses in height.\n\n  Usually this is not a problem, but sometimes - for example, when using `transition-expand` and\n  sequentially placed elements under each other, it looks rough. \\\n  With this option, you can achieve a more pleasant behavior of the elements in this situation.\n\n  ```ts\n  export type TransitionNoMove = boolean; // Default: false\n  ```\n\n  **Example:**\n\n  ```vue\n  \u003ctemplate\u003e\n    \u003cdiv\u003e\n      \u003c!--\n        In this case, the height of the parent element (`ul`) changes smoothly.\n      --\u003e\n      \u003ctransition-expand group no-move tag=\"ul\"\u003e\n        \u003cli v-for=\"item in items\" :key=\"item.id\"\u003e...\u003c/li\u003e\n      \u003c/transition-expand\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n  ```\n\n\u003c/details\u003e\n\n---\n\n### Unique props of `TransitionExpand`\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eaxis\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Axis by which the element should expand. \\\n  If an object given then `enter` and `leave` values will be used for enter and leave transition respectively.\n\n  ```ts\n  type ExpandAxisValue = 'x' | 'y'; // Default: 'y'\n  export type TransitionExpandAxis = ExpandAxisValue | { enter: ExpandAxisValue, leave: ExpandAxisValue }\n  ```\n\n\u003c/details\u003e\n\n---\n\n### Unique props of `TransitionSlide`\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eoffset\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  The element offset by `x` and `y` axis before/after the transition. \\\n  Should be an integer or a string representation of percentage value (e.g. `'100%'`).\n\n  Number values treats as `px` offset, string values ending with `%` sign treats as `percentage of the element width / height`. \\\n  [Examples and explanation](#transitionslide)\n\n  If an object given then `enter` and `leave` values will be used for enter and leave transition respectively.\n\n  ```ts\n  type SlideOffsetValue = [number | string, number | string];\n\n  // Default: [0, -16]\n  export type TransitionSlideOffset = SlideOffsetValue | { enter: SlideOffsetValue, leave: SlideOffsetValue }\n  ```\n\n\u003c/details\u003e\n\n---\n\n### Unique props of `TransitionScale`\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eaxis\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  Scale axis to be animated.\n\n    * `both` (uses `transform: scale()`)\n    * `x` (uses `transform: scaleX()`)\n    * `y` (uses `transform: scaleY()`)\n\n  [Examples and explanation](#transitionscale)\n\n  If an object given then `enter` and `leave` values will be used for enter and leave transition respectively.\n\n  ```ts\n  type ScaleAxisValue = 'x' | 'y' | 'both';\n\n  // Default: 'both'\n  export type TransitionScaleAxis = ScaleAxisValue | { enter: ScaleAxisValue, leave: ScaleAxisValue }\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eorigin\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  `transform-origin` CSS property applied to element(s). \\\n\n  If an object given then `enter` and `leave` values will be used for enter and leave transition respectively.\n\n  [Examples and explanation](#transitionscale)\n\n  If an object given then `enter` and `leave` values will be used for enter and leave transition respectively.\n\n  ```ts\n  // Default: '50% 50%'\n  export type TransitionScaleAxis = string | { enter: string, leave: string }\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003escale\u003c/code\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n\n  The element scale value before/after the transition. Should be a number between `0` and `1`.\n\n  If an object given then `enter` and `leave` values will be used for enter and leave transition respectively.\n\n  [Examples and explanation](#transitionscale)\n\n  If an object given then `enter` and `leave` values will be used for enter and leave transition respectively.\n\n  ```ts\n  // Default: 0\n  export type TransitionScaleScale = number | { enter: number, leave: number }\n  ```\n\n\u003c/details\u003e\n\n---\n\n## Events\n\nComponents do not provide any special events,\nbut trigger [all standard transition events](https://ru.vuejs.org/v2/guide/transitions.html#JavaScript-%D1%85%D1%83%D0%BA%D0%B8):\n\n* `before-enter`\n* `enter`\n* `after-enter`\n* `enter-cancelled`\n* `before-leave`\n* `leave`\n* `after-leave`\n* `enter-leave`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorevm%2Fvue-transitions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorevm%2Fvue-transitions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorevm%2Fvue-transitions/lists"}