In-depth VueToCounter
Structure
VueToCounter consists of part, digit, cell, and suffix. You can see these parts annotated in the example below.
The suffix is an optional part. In the example below, it is used to display time units (day, hour).
Hierarchy
Using the example above as a reference, the hierarchy of VueToCounter is as follows:
Usage
For simple usage (such as simple scrolling effect, localization, custom styles), you don't need to worry about the implementation details of VueToCounter.
However, when we need to customize animation effects, such as (0V V 0u u 0e e 0 0T T 0o o 0 0C C 0o o 0u u 0n n 0t t 0e e 0r r ), or need to customize the style of each digit, understanding the structure of VueToCounter is essential.
To provide enough freedom to customize animation effects and styles, you can use
animationOptions
to set animation properties down to the digit level.cellStyle
to set style properties down to the cell level.
Set Animation Options
animationOptions
is the configuration object for Motion (see Motion API), where you can set animation properties such as duration
, delay
, ease
, etc.
The configuration can take the following forms:
An object containing the configuration items you set, which will be applied to all digit.
js{ duration: 0.5, delay: 0.1 }
A one-dimensional array, which will be applied to all digit in the corresponding part.
js[ { duration: 0.5, delay: 0.1 }, // part 1 { duration: 0.5, delay: 0.4 }, // part 2 ... ]
A two-dimensional array, which will be applied to the corresponding digit in the corresponding part.
js[ [ // part 1 { duration: 0.5, delay: 0.1 }, // digit 1 { duration: 0.5, delay: 0.4 }, // digit 2 ... ], ... ]
A callback function that accepts an object containing:
testResults
: a two-dimensional array containing the test results for each digit.data
: the data used for scrolling. Contains the data for constructing the scroll list for each digit.direction
: the direction of scrolling.up
ordown
.value
: the new and old values of the number.
The return value of the function can be one of the three forms above.
For example, in the delay example, after enabling delayed increment, the animation delay for each digit is set to achieve the effect of incremental delay.
const delay = ref(0.1);
const increase = ref(false);
const animationOptions = ({ testResults }) => {
if (!increase.value) return { delay: delay.value };
let count = 0;
return testResults.map((part) =>
part.map(() => ({ delay: count++ * delay.value }))
);
};
Custom Style
cellStyle
is a CSSProperties
object where you can set the style of cell.
The configuration forms add one more layer on top of animationOptions
:
- A three-dimensional array, which will be applied to the corresponding cell in the corresponding digit in the corresponding part.js
[ [ // part 1 [ // digit 1 { color: "red" }, // cell 1 { color: "blue" }, // cell 2 ], ], ];
- The callback function form is the same as
animationOptions
. It can also return a three-dimensional array.