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: 4 months 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 (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-23T03:22:47.000Z (about 8 years ago)
- Last Synced: 2025-04-03T14:21:28.892Z (8 months 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
- awesome-vue-zh - Vue-mixin的吐温 - Mixin工厂,它将补间值添加到动画的组件上下文中 (UI实用程序 / 动画)
- awesome-vue - vue-mixin-tween ★22 - Mixin factory that adds tweened values to component context for animations (UI Utilities / Animation)
- awesome-vue - vue-mixin-tween - Vue mixin factory to tween component numerical data ` 📝 4 years ago` (UI Utilities [🔝](#readme))
- awesome-vue - vue-mixin-tween - Mixin factory that adds tweened values to component context for animations (UI Utilities / Animation)
- awesome-vue - vue-mixin-tween - Mixin factory that adds tweened values to component context for animations (Components & Libraries / UI Utilities)
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.