Vue3-sfc-transitions NPM

vue3-sfc-transitions

Demo

Install :coffee:

npm i -S vue3-sfc-transitions

Local usage :rocket:

<template>
   <fade-transition>
      <div class="box" v-show="show">
        <p>Fade transition</p>
      </div>
    </fade-transition>
</template>

<script>
import 'vue3-sfc-transitions/dist/style.css'
import { FadeTransition } from 'vue3-sfc-transitions'

export default {
  components: {
    FadeTransition
  }
}
</script>

Global usage

import 'vue3-sfc-transitions/dist/style.css'
import Transitions from 'vue3-sfc-transitions'
import { createApp } from 'vue'

const app = createApp(App)
app.use(Transitions)

List of available transitions

FadeTransition
ZoomCenterTransition
ZoomXTransition
ZoomYTransition
SlideXLeftTransition
SlideXRightTransition
SlideYUpTransition
SlideYDownTransition
ScaleTransition
CollapseTransition

Props

Prop	Type	Default	Description
duration	Number, Object	`300`	Transition duration. Number for specifying the same duration for enter/leave transitions. Object style `{enter: 300, leave: 300}` for specifying explicit durations for enter/leave.
group	Boolean	`false`	Whether the component should be a `transition-group` component.
tag	String	`'span'`	Transition tag, in case the component is a `transition-group.`
origin	String	`''`	Transform origin property, can be specified with styles as well but it's shorter with this prop.
styles	Object	`{ animationFillMode: 'both', animationTimingFunction: 'ease-out' }`	Element styles that are applied during transition. These styles are applied on `@beforeEnter` and `@beforeLeave` hooks.

Group transitions

Each transition can be used as a transition-group by adding the group prop to one of the desired transitions.

<fade-transition group>
   <!--keyed children here-->
</fade-transition>

Gotchas/things to watch: 1. Elements inside group transitions should have display: inline-block or must be placed in a flex context: Vue.js docs reference 2. Each transition has a move class move class docs. Unfortunately the duration for the move transition cannot be configured through props. By default each transition has a move class associated with .3s transition duration:

Zoom

  .zoom-move { transition: transform .3s ease-out; }

Slide

  .slide-move { transition: transform .3s ease-out; }

Scale

  .scale-move { transition: transform .3s cubic-bezier(.25, .8, .50, 1); }

Fade
```
  .fade-move { transition: transform .3s ease-out; }
```
If you want to configure the duration, just redefine the class for the transition you use with the desired duration.