@ayase/vc-motion NPM

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.

vue vue-component vue-motion motion antd antdv ant-design

@ayase/vc-util @babel/runtime utility-types vue-types

@everything-registry/sub-chunk-105 @infinitebrahmanuniverse/nolb-_ay @zalastax/nolb-_ay @ayase/vc-trigger

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago