网站建设 目的,现在c 做网站用什么框架,珠海品牌网站建,wordpress 商业版权介绍: 当数字变化时#xff0c;只改变变化的数字位#xff0c;其余的不变#xff0c;可以递增、递减、骤变、负数也可以#xff0c;但是样式要根据具体的项目需求去改#xff1b;
效果1、增加数字#xff1a; 效果2、减少数字#xff1a; 使用方法#xff1a;
te…介绍: 当数字变化时只改变变化的数字位其余的不变可以递增、递减、骤变、负数也可以但是样式要根据具体的项目需求去改
效果1、增加数字 效果2、减少数字 使用方法
templateAnimatNumber :datadata /
/templatescript setup
// 引入动画
import AnimatNumber from ./components/AnimatNumber.vue;const data ref(0);setInterval(() {data.value - 30;
}, 2000);
/scriptstyle langscss/style
组件代码(vue3)
templatediv classnum-wrapdiv v-for(item, index) in computedData :keyindex classnum-itemdiv classnum-inner refnumInnerRefdiv classprev{{ item.newValue }}/divdiv classcurrent{{ item.oldValue }}/divdiv classnext{{ item.oldValue }}/div/div/div/div
/templatescript setup
// 数字滚动效果
import { onBeforeUnmount, watch, ref, nextTick } from vue;const props defineProps({// 传进来的数据 number、string的number都可以data: {type: [Number, String],default: 999},// 动画持续时间 number、string的number都可以 最低1000msduration: {type: [Number, String],default: 500},// 基本的高度 所有的动画移动距离都是和这个有关的确保这个值和css的$height一样否则有问题baseHeight: {type: Number,default: 50}
});const numInnerRef ref();// raf演示器
const setTimeoutPolyfill (func, delay) {let startTime Date.now();let rafId;function animationFrameCallback() {const currentTime Date.now();const timeElapsed currentTime - startTime;if (timeElapsed delay) {func();} else {rafId requestAnimationFrame(animationFrameCallback);}}rafId requestAnimationFrame(animationFrameCallback);// 返回一个取消函数return () cancelAnimationFrame(rafId);
};/*
推演公式新 旧1001 - 10001002 - 10011003 - 10021004 - 10031005 - 1004
*/const newArr ref([]);
const oldArr ref([]);
const computedData ref(props.data.toString().split().map((item, index) ({ index, oldValue: item, newValue: item }))
);
const lock ref(false);
// 延时器
const timer ref({timerOne: null,timerTwo: null
});watch(() props.data,(newVal, oldVal) {if (${newVal}.length ! ${oldVal}.length) {lock.value false;}if (!lock.value) {computedData.value props.data.toString().split().map((item, index) ({ index, oldValue: item, newValue: item }));lock.value true;}newArr.value newVal.toString().split().map((item, index) ({ index, value: item }));oldArr.value oldVal.toString().split().map((item, index) ({ index, value: item }));/*如果newArr的长度大于于oldArr的长度则需要给oldArr从前面增加newArr.length - oldArr.length的长度的{ index, oldValue: -, newValue: newValueItem }, 同时更新oldArr没有新增的index*/// 新值和老值差const differLength newArr.value.length - oldArr.value.length;if (newArr.value.length oldArr.value.length) {for (let i 0; i differLength; i) {oldArr.value.unshift({ index: i, value: - });}// 重新设置indexoldArr.value.forEach((item, index) (item.index index));}// 改变的数字的索引集合const indexArr [];newArr.value.forEach(item {if (item.value ! oldArr.value[item.index].value) {indexArr.push(item.index);}});nextTick(() {indexArr.forEach(diffIndex {numInnerRef.value[diffIndex].children[0].innerHTML newArr.value[diffIndex].value;numInnerRef.value[diffIndex].children[0].animate([{ top: ${-props.baseHeight}px }, { top: 0 }],{duration: props.duration,fill: forwards});numInnerRef.value[diffIndex].children[1].animate([{ top: 0 }, { top: ${props.baseHeight}px }],{duration: props.duration,fill: forwards});timer.value.timerOne setTimeoutPolyfill(() {numInnerRef.value[diffIndex].children[2].innerHTML oldArr.value[diffIndex].value;timer.value.timerTwo setTimeoutPolyfill(() {numInnerRef.value[diffIndex].children[1].innerHTML newArr.value[diffIndex].value;}, props.duration);numInnerRef.value[diffIndex].children[2].style.top ${-props.baseHeight}px;}, props.duration);});});},{ deep: true }
);// 卸载
onBeforeUnmount(() {timer.value.timerOne timer.value.timerOne();timer.value.timerTwo timer.value.timerTwo();
});
/scriptstyle langscss scoped
$width: 50px;
$height: 50px;
.num-wrap {margin-top: 200px;display: flex;gap: 10px;.num-item {width: $width;height: $height;border: 1px solid #000;border-radius: 8px;font-size: 20px;font-weight: 600;position: relative;overflow: hidden;color: #0dfbff;background: rgba(0, 13, 23, 0.5);.num-inner {position: relative;width: $width;height: $height;}.prev,.current,.next {width: $width;height: $height;text-align: center;line-height: $width;position: absolute;}.prev {top: -$height;}.current {top: 0;}.next {top: $height;}}
}
/style
