Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vitorluizc/vue-flipper
A component to flip elements with a nice transition.
https://github.com/vitorluizc/vue-flipper
animation bem-methodology bili flip flip-animation flipper stylus transition vue vue-component vue-flip vue-flipper
Last synced: 9 days ago
JSON representation
A component to flip elements with a nice transition.
- Host: GitHub
- URL: https://github.com/vitorluizc/vue-flipper
- Owner: VitorLuizC
- License: mit
- Created: 2018-12-06T01:41:57.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-20T23:32:32.000Z (over 5 years ago)
- Last Synced: 2024-11-07T23:47:42.826Z (9 days ago)
- Topics: animation, bem-methodology, bili, flip, flip-animation, flipper, stylus, transition, vue, vue-component, vue-flip, vue-flipper
- Language: Vue
- Homepage: https://codesandbox.io/s/m7lowxvwm9
- Size: 68.4 KB
- Stars: 32
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-flipper
[](https://app.fossa.io/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-flipper?ref=badge_shield)
A component to flip elements with a nice transition.
- :zap: It is really small, JavaScript + CSS (min + gzip) is smaller than 1KB
- :art: CSS uses Stylus + BEM + Autoprefixer
- :package: There are ESM, CommonJS and UMD distributions
You can se by youself on [Codepen](https://codepen.io/VitorLuizC/pen/GPJEEN) or [CodeSandbox](https://codesandbox.io/s/m7lowxvwm9).
## Installation
This library is published in the NPM registry and can be installed using any compatible package manager.
```sh
npm install vue-flipper --save
# For Yarn, use the command below.
yarn add vue-flipper
```
## Usage
Just import `Flipper` component from `'vue-flipper'` and use it like any other Vue component.
```vue
Frontface
Backface
import Flipper from 'vue-flipper';
export default {
components: { Flipper },
data () {
return {
flipped: false
};
},
methods: {
onClick () {
this.flipped = !this.flipped;
}
}
};
```
### Usage as global component
If you need `` available everywhere, you can register it as a global component.
> And don't forget to import its CSS.
```js
import 'vue-flipper/dist/vue-flipper.css';
import Vue from 'vue';
import Flipper from 'vue-flipper';
Vue.component('flipper', Flipper);
```
### Usage from CDN
`vue-flipper` has an UMD bundle and CSS available through JSDelivr and Unpkg CDNs.
```html
/**
* vue-flipper is available through VueFlipper.
*/
console.dir(VueFlipper);
/**
* Vue.use will add flipper as global component.
*/
Vue.component('flipper', VueFlipper);
```
## Props
| Name | Description | Type | Default
|:---- |:----------- |:---- |:-------
| flipped | If `true` flips to backface, otherwise to frontface. | `Boolean` | `false`
| width | Component's width. | `CSSLength (String)` | `'100%'`
| height | Component's height. | `CSSLength (String)` | `'100%'`
| duration | Component's transition duration. | `CSSTime (String)` | `'0.5s'`
| transition | Component's transition timing function. | `CSSTransitionFunction (String)` | `'ease-in'`
## Events
`Flipper` component pass up every `HTMLElement` event. So, you can use `@click`, `@mouseover` etc.
## License
Released under [MIT License](./LICENSE).
[](https://app.fossa.io/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-flipper?ref=badge_large)