@noction/vue-bezier
v1.11.2
Published
Vue3 reusable transition components
Downloads
901
Readme
@noction/vue-bezier
Demo
Install :coffee:
npm i -S @noction/vue-bezier
Local usage :rocket:
<template>
<fade-transition>
<div class="box" v-show="show">
<p>Fade transition</p>
</div>
</fade-transition>
</template>
<script>
import '@noction/vue-bezier/styles'
import { FadeTransition } from '@noction/vue-bezier'
export default {
components: {
FadeTransition
}
}
</script>
Global usage
import '@noction/vue-bezier/styles'
import Transitions from '@noction/vue-bezier'
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:
- Elements inside
group
transitions should havedisplay: inline-block
or must be placed in a flex context: Vue.js docs reference - 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 amove
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.
License
MIT © 50rayn
Special thanks to
@cristijora (The UI for list transitions in the demo is inspired by vue2-transitions )