import Vue from 'vue';import VueTransitions from '@morev/vue-transitions';import '@morev/vue-transitions/dist/index.css';Vue.use(VueTransitions);

import Vue from 'vue';import { plugin as VueTransitions } from '@morev/vue-transitions';import '@morev/vue-transitions/styles';// Register globally only `<transition-fade>` and `<transition-slide>`,// also rename `<transition-slide>` to `<slide-transition>`Vue.use(VueTransitions({  components: {    TransitionFade: 'TransitionFade',    TransitionSlide: 'slide-transition',  }}));

import Vue from 'vue';import { plugin as VueTransitions } from '@morev/vue-transitions';import '@morev/vue-transitions/styles';Vue.use(VueTransitions({  // Default duration for all transitions now is `200`  defaultProps: {    duration: 200,  },  // But for `<transition-expand>` default duration is `500`  componentDefaultProps: {    TransitionExpand: {      duration: 500,    }  }}));

<template>  <transition-fade>    <div v-if="isVisible">...</div>  </transition-fade></template><script>  import { TransitionFade } from '@morev/vue-transitions';  export default {    components: { TransitionFade },  };</script>

<template>  <!--    Element will fade in and fade out to top.    Initial transform is `transform: translate(0, -16px)`  -->  <transition-slide :offset="[0, -16]"></transition-slide>  <!--    Element will fade in and fade out to bottom left side.    Initial transform is `transform: translate(-16px, 16px)`  -->  <transition-slide :offset="[-16, 16]"></transition-slide>  <!--    Element will fade in and fade out to right,    and the offset will be relative to the element width itself.    Initial transform is `transform: translate(100%, 0)`  -->  <transition-slide :offset="['100%', 0]"></transition-slide>  <!--    Element will fade in from top and fade out to bottom,    and the offset will be relative to the element height itself.    Transform before element appears: `transform: translate(0, -100%)`    Transform when element disappears: `transform: translate(0, 100%)`  -->  <transition-slide    :offset="{      enter: [0, '-100%'],      leave: [0, '100%']    }"  ></transition-slide></template>

<template>  <div class="block">    <!--      In this case, given the CSS styles,      initial transform will be calculated to `translate(-50%, -16px)`    -->    <transition-slide :offset="[0, -16]">      <div class="block__dropdown" v-if="isVisible">        ...      </div>    </transition-slide>  </div></template><style>  .block {    position: relative;  }  .block__dropdown {    position: absolute;    top: 100%;    left: 50%;    transform: translateX(-50%);  }</style>

<template>  <!--    This element appears in `x` axis and disappears in `y`  -->  <transition-scale :axis="{ enter: 'x', leave: 'y' }"></transition-scale>  <!--    This element behaves like the `transition-expand`,    but touches only `transform` property  -->  <transition-scale transform-origin="50% 0%"></transition-scale>  <!--    This element scales just a little when fading in/out.  -->  <transition-scale :scale=".8"></transition-scale></template>

export type TransitionGroup = boolean; // Default: false

<template>  <div>    <!--      To animate a list of items, use `group` prop.      ⚠️ Don't forget you should pass the `:key` to each item in this case.    -->    <transition-fade group>      <div v-for="item in items" :key="item.id">...</div>    </transition-fade>  </div></template>

export type TransitionTag = string; // Default: 'span'

<template>  <div>    <!--      Passing the tag renders transition component with it.      It's suitable, for example, for rendering semantic lists:    -->    <transition-fade group tag="ul">      <li v-for="item in items" :key="item.id">...</li>    </transition-fade>    <!-- ✨ Rendered HTML: -->    <ul>      <li>...</li>      <li>...</li>    </ul>  </div></template>

export type TransitionAppear = boolean; // Default: undefined

<template>  <div>    <!--      This element appears when mounted if `isVisible` is `true` by default.    -->    <transition-fade appear>      <div v-if="isVisible">...</div>    </transition-fade>  </div></template>

export type TransitionMode = 'in-out' | 'out-in' | undefined; // Default: undefined

<template>  <div>    <!--      Current element transitions out first, then when complete,      the new element transitions in.    -->    <transition-slide mode="out-in">      <component :is="currentComponent">...</component>    </transition-slide>  </div></template>

// Default: 300export type TransitionDuration = number | { enter: number, leave: number }

<template>  <div>    <!--      If single value provided, the passed amount of milliseconds      applied to enter and leave animations both.      This element will appear and disappear within 500ms:    -->    <transition-fade :duration="500">      <div v-if="isVisible">...</div>    </transition-fade>    <!--      If an object given, it SHOULD have `enter` and `leave` keys.      This element appears in 200ms and disappears within 500ms:    -->    <transition-fade :duration="{ enter: 200, leave: 500 }">      <div v-if="isVisible">...</div>    </transition-fade>  </div></template>