vue-fliplay
v0.1.2
Published
<a href="https://www.npmjs.com/package/vue-fliplay"><img src="https://img.shields.io/npm/v/vue-fliplay?color=3fb883&label=" alt="NPM version"></a>
Downloads
10
Readme
vue-fliplay
Inspired by react-flip-demo
Flip is means First, Last, Invert, Play. This is a Vue 3 component, to make your list with animation if the data change.
Install
npm i vue-fliplay
Usage
Import the component FlipWarpper
and FlipItem
from vue-fliplay
.
import { FlipItem, FlipWarpper } from 'vue-fliplay'
<FlipWarpper :flip-key="{ list }">
<!-- ...other element... -->
<!-- flip-item -->
<FlipItem v-for="item in list" :key="item">
<div>{{ item }}</div>
</FlipItem>
<!-- ...other element... -->
</FlipWarpper>
Checkout the Playground for more examples.
Props
FlipWarpper
| Name | Description | Type | Required
|:---- |:----------- |:---- |:-------
| flip-key | flip-key
is a object. The component will create a deep watcher. When the properties of flip-key
change, the flip-item will play the animation. | Object
| true
FlipItem
None