https://github.com/lukechinworth/vue-mixin-tween
Vue mixin factory to tween component numerical data
https://github.com/lukechinworth/vue-mixin-tween
mixin tween vue
Last synced: 8 days ago
JSON representation
Vue mixin factory to tween component numerical data
- Host: GitHub
- URL: https://github.com/lukechinworth/vue-mixin-tween
- Owner: lukechinworth
- License: mit
- Created: 2017-11-07T21:54:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-23T03:22:47.000Z (over 7 years ago)
- Last Synced: 2025-04-03T14:21:28.892Z (29 days ago)
- Topics: mixin, tween, vue
- Language: JavaScript
- Size: 7.81 KB
- Stars: 24
- Watchers: 0
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Mixin Tween
Vue mixin factory to tween component numerical data (using Tween.js).
## Installation
`npm install vue-mixin-tween`
## Usage
To tween a component prop, e.g. `width`:
```javascript
import VueMixinTween from 'vue-mixin-tween';
export default {
props: {
width: Number,
},
mixins: [
VueMixinTween('width'),
],
// this.widthTween now available in your component
// update width to new value, and widthTween will tween from the old to the new
};
```
## API
### `VueMixinTween(propName[, duration[, ease]])`
#### `propName: String` (required)
Component property to watch for changes. Tweened property available on component context at `${propName}Tween`.
#### `duration: Number = 500` (optional)
Duration of tween.
#### `ease: Function = TWEEN.Easing.Quadratic.Out` (optional)
Easing function to tween value with.
## Contributing
Please send a pull request if you'd like to improve the project.
## Attribution
This project borrows heavily from [Animating State with Watchers](https://vuejs.org/v2/guide/transitioning-state.html#Animating-State-with-Watchers) from the vue docs. It basically just moves that example into a reusable mixin.