- import '@morev/vue-transitions/styles';+ import '@morev/vue-transitions/dist/index.css';

<template>  <transition-fade>    <divv-if="isVisible">...</div>  </transition-fade></template><script>import {TransitionFade }from'@morev/vue-transitions';exportdefault {    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>  <divclass="block"><!--      In this case, given the CSS styles,      initial transform will be calculated to `translate(-50%, -16px)`-->    <transition-slide:offset="[0, -16]">      <divclass="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-scaletransform-origin="50% 0%"></transition-scale><!--    This element scales just a little when fading in/out.-->  <transition-scale:scale=".8"></transition-scale></template>

exporttypeTransitionGroup=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-fadegroup>      <divv-for="item in items":key="item.id">...</div>    </transition-fade>  </div></template>

exporttypeTransitionTag=string;// Default: 'span'

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

exporttypeTransitionAppear=boolean;// Default: undefined

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

exporttypeTransitionMode='in-out'|'out-in'|undefined;// Default: undefined

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

// Default: 300exporttypeTransitionDuration=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">      <divv-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 }">      <divv-if="isVisible">...</div>    </transition-fade>  </div></template>

// Default: 300exporttypeTransitionMoveDuration=number;

// Default: 300exporttypeTransitionDelay=number|{enter:number,leave:number};

<template>  <div><!--      If single value provided, then enter and leave animations will wait      for given amount of milliseconds before run.      This element will appear and disappear 100ms after      `isVisible` property changes:-->    <transition-fade:delay="100">      <divv-if="isVisible">...</div>    </transition-fade><!--      If an object given, it SHOULD have `enter` and `leave` keys.      This element appears immediately and disappears 200ms after      `isVisible` property changes:-->    <transition-fade:duration="{ enter: 0, leave: 300 }">      <divv-if="isVisible">...</div>    </transition-fade>  </div></template>

exporttypeTransitionEasing=string;// Default: 'cubic-bezier(.25, .8, .5, 1)'

<template>  <div><!--      If single value provided, then enter and leave animations will use it:-->    <transition-fadeeasing="ease-out">      <divv-if="isVisible">...</div>    </transition-fade><!--      If an object given, it SHOULD have `enter` and `leave` keys.      This element uses custom animation known as `bounce-in` for entering      and simple `ease-out` curve for leaving:-->    <transition-fade:easing="{        enter: 'cubic-bezier(0.6, 0, 0.4, 2)',        leave: 'ease-out'      }"    >      <divv-if="isVisible">...</div>    </transition-fade>  </div></template>

exporttypeTransitionNoOpacity=boolean;// Default: false

<template>  <div><!--      This panel appears from the right edge of the screen,      while its transparency remains unchanged.-->    <transition-slide:offset="['100%', 0]"no-opacity>      <divclass="panel"v-if="isVisible">...</div>    </transition-slide>  </div></template><style>.panel {position:fixed;top:0;right:0;bottom:0;background:#ffffff;width:400px;  }</style>

exporttypeTransitionNoMove=boolean;// Default: false

<template>  <div><!--      In this case, the height of the parent element (`ul`) changes smoothly.-->    <transition-expandgroupno-movetag="ul">      <liv-for="item in items":key="item.id">...</li>    </transition-expand>  </div></template>

typeExpandAxisValue='x'|'y';// Default: 'y'exporttypeTransitionExpandAxis=ExpandAxisValue|{enter:ExpandAxisValue,leave:ExpandAxisValue}

typeSlideOffsetValue=[number|string,number|string];// Default: [0, -16]exporttypeTransitionSlideOffset=SlideOffsetValue|{enter:SlideOffsetValue,leave:SlideOffsetValue}

* `both` (uses `transform: scale()`)* `x` (uses `transform: scaleX()`)* `y` (uses `transform: scaleY()`)

typeScaleAxisValue='x'|'y'|'both';// Default: 'both'exporttypeTransitionScaleAxis=ScaleAxisValue|{enter:ScaleAxisValue,leave:ScaleAxisValue}

// Default: '50% 50%'exporttypeTransitionScaleAxis=string|{enter:string,leave:string}

// Default: 0exporttypeTransitionScaleScale=number|{enter:number,leave:number}