vc-motion

Vue 3 lifecycle controlled motion library.

rc-motion for vue 3

Install

Example

<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>

API

CSSMotion

Props

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	-

Slots

Name	Params	Description
default	({ ref, class, style }) => VNode	render default children

Emits

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

CSSMotionList

extends all the props from CSSMotion

Props

Prop	Description	Type	Default
keys	Motion list keys	VNode['key'][]	-
component	wrapper component	string/Component	div

Development

yarn install
yarn start

License

vc-motion is released under the MIT license.