Vue3中如何实现数字翻牌效果?
一、需求
监听数据的变化，实现数字翻牌效果
本人OS:本想截一个gif，但是一直没找到合适的截gif工具......有好用的截gif工具，跪求戳戳我~
二、思路
1.设置初始数组：[0]
2. 把获取到的新数据整个数字用逗号隔开，组成一个新的数组
3.数组中的每一个数字都是在0~9之间移动展示，数字位移的通用公式：
transform: translate(-50%,-${number * 10}%)4.监听数据的变化，当数据变化时，获取每个数字对应的ref，添加位移样式即可，移动的时间可以自行调整
三、完整代码
<template>
<div class="digitalFlopBox">
<div class="title">数字翻牌器</div>
<div class="btn">
<button @click="changeNum">点我</button>
</div>
<div class="boxContainer">
<div class="box-item" v-for="(item, index) in state.numList" :key="index">
<span class="itemNum" :class="{ isChange: state.flag }" ref="spanRefs">0123456789</span>
</div>
</div>
</div>
</template>
<script setup lang='ts' name="funDigitalFlop">
import { reactive, ref, watch } from 'vue'
const spanRefs = ref()
const state = reactive({
numList: [0],
flag: false
})
const changeNum = () => {
state.numList = [1, 5, 3, 2]
}
watch(() => state.numList, (newVal, oldVal) => {
console.log(newVal, oldVal, '数据变化');
if (newVal !== oldVal) {
console.log(spanRefs.value);
spanRefs.value.map((item: any, index: number) => {
const span = spanRefs.value[index];
if (span) {
span.style.transform = `translate(-50%, -${newVal[index] * 10}%)`
}
})
}
},
{ deep: true }
)
</script>
<style lang="scss" scoped>
.digitalFlopBox {
.title {
width: 100%;
text-align: center;
font-size: 30px;
padding: 10px;
}
.btn {
text-align: center;
margin-bottom: 10px;
}
.boxContainer {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background-color: #ccc;
margin: 0 auto;
.box-item {
width: 30px;
height: 50px;
box-shadow: 0px 6px 9px 0px rgba(28, 119, 255, 0.25);
border-radius: 2px 2px 2px 2px;
background: rgba(10, 35, 126, 0.5);
border: 1px solid #3978dd;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 30px;
margin-left: 10px;
position: relative;
writing-mode: vertical-lr; // 从左到右垂直排版
text-orientation: upright;
overflow: hidden; // 溢出隐藏
.itemNum {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
letter-spacing: 10px;
transition: transform 1s ease-in-out;
}
// .isChange {
// transform: translate(-50%, -50%);
// }
}
}
}
</style>