@160over90/vue-tweened-number 中文文档教程
TweenedNumber
用于在数值之间进行补间的组件。
Features
允许您补间任何给定的数字。 您还可以在值补间期间或补间完成后更改 CSS 或调用逻辑。
Events
该组件允许两个事件挂钩。
@updateallows you to execute logic while the value is tweening.@completeallows you to execute logic once the tweening is completed.
示例
<TweenedNumber
:value="number"
:duration="2000"
:easing="easing.bind()"
@update="update"
@complete="complete"
/>
...
methods: {
update() {
// Do something
},
complete() {
// Do something
},
},
要访问原始 DOM 事件，请使用特殊的 $event 变量。
<TweenedNumber
:value="number"
:duration="2000"
:easing="easing.bind()"
@update="update($event)"
/>
...
methods: {
update(event) {
// eslint-disable-next-line no-console
console.log('updating', event);
},
},
Props
标签（字符串，默认值：'span'） 您想要的 HTML 元素的类型。
值（数字，必填） 要补间的值。
缓动（[字符串，函数]，默认值：TWEEN.Easing.Linear.None） 是什么决定了 Tween.js 如何在值之间进行插值。 有关 Tween 缓动方法的更多信息，请单击此处。
持续时间（数字，默认值：1000） 您希望补间持续多长时间。
Project setup
yarn install
Compiles and hot-reloads for development
yarn run serve
Compiles and minifies for production
yarn run build
Lints and fixes files
yarn run lint
TweenedNumber
A component for tweening between numeric values.
Features
Allows you to tween any given numbers. You also have the ability to change CSS or invoke logic while the value is tweening or once the tweening is completed.
Events
This component allows two event hooks.
@updateallows you to execute logic while the value is tweening.@completeallows you to execute logic once the tweening is completed.
Example
<TweenedNumber
:value="number"
:duration="2000"
:easing="easing.bind()"
@update="update"
@complete="complete"
/>
...
methods: {
update() {
// Do something
},
complete() {
// Do something
},
},
To get access to the original DOM event, use the special $event variable.
<TweenedNumber
:value="number"
:duration="2000"
:easing="easing.bind()"
@update="update($event)"
/>
...
methods: {
update(event) {
// eslint-disable-next-line no-console
console.log('updating', event);
},
},
Props
tag (String, Default: 'span') The type of HTML element you want.
value (Number, Required) The value that you want to tween.
easing ([String, Function], Default: TWEEN.Easing.Linear.None) What determines how Tween.js interpolates between values. For more information on Tween easing methods click here.
duration (Number, Default: 1000) How long you want the tweening to last.
Project setup
yarn install
Compiles and hot-reloads for development
yarn run serve
Compiles and minifies for production
yarn run build
Lints and fixes files
yarn run lint
