Vue 3 lifecycle controlled motion library.
rc-motion
for vue 3
<template>
<CSSMotion :visible="visible" motion-name="my-motion">
<template v-slot="props">
<div v-bind="props" />
</template>
</CSSMotion>
</template>
<script>
import CSSMotion from '@ayase/vc-motion';
export default {
components: { CSSMotion },
data() {
return {
visible: false
};
}
};
</script>
Prop | Description | Type | Default |
---|---|---|---|
motionName |
Config motion name, will dynamic update when status changed | string |
- |
visible |
Trigger motion events | boolean |
true |
motionAppear |
Use motion when appear | boolean |
true |
motionEnter |
Use motion when enter | boolean |
true |
motionLeave |
Use motion when leave | boolean |
true |
motionLeaveImmediately |
Will trigger leave even on mount | boolean |
- |
motionDeadline |
Trigger motion status change even when motion event not fire | number |
- |
removeOnLeave |
Remove element when motion leave end | boolean |
true |
leavedClass |
Set leaved element className | string/object/array |
- |
Name | Params | Description |
---|---|---|
default |
({ ref, class, style }) => VNode |
render default children |
Name | Params | Description |
---|---|---|
onAppearStart |
(HTMLElement, Event) => CSSProperties |
Trigger when appear start, return style will patch to element |
onEnterStart |
(HTMLElement, Event) => CSSProperties |
Trigger when enter start, return style will patch to element |
onLeaveStart |
(HTMLElement, Event) => CSSProperties |
Trigger when leave start, return style will patch to element |
onAppearActive |
(HTMLElement, Event) => CSSProperties |
Trigger when appear active, return style will patch to element |
onEnterActive |
(HTMLElement, Event) => CSSProperties |
Trigger when enter active, return style will patch to element |
onLeaveActive |
(HTMLElement, Event) => CSSProperties |
Trigger when leave active, return style will patch to element |
onAppearEnd |
(HTMLElement, Event) => boolean |
Trigger when appear end, will not finish when return false |
onEnterEnd |
(HTMLElement, Event) => boolean |
Trigger when enter end, will not finish when return false |
onLeaveEnd |
(HTMLElement, Event) => boolean |
Trigger when leave end, will not finish when return false |
extends all the props from CSSMotion
Prop | Description | Type | Default |
---|---|---|---|
keys |
Motion list keys | VNode['key'][] |
- |
component |
wrapper component | string/Component |
div |
yarn install
yarn start
vc-motion is released under the MIT license.