Skip to content
generated from JiatLn/vvtt

A Vue 3 component, to make your list with animation if binded data update.

License

Notifications You must be signed in to change notification settings

JiatLn/vue-fliplay

Repository files navigation

vue-fliplay

NPM version

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.

vue-fliplay GIF

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

License

MIT License © 2022-Present JiatLn

About

A Vue 3 component, to make your list with animation if binded data update.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published