html结构
<template>
<div class="count-flop" :key="compKey">
<div
:class="item != '.' ? 'count-flop-box' : 'count-flop-point'"
v-for="(item, index) in value"
:key="index"
>
<div
v-if="item != '.'"
class="count-flop-content"
:class="['rolling_' + item]"
>
<div
v-for="(item2, index2) in numberList"
:key="index2"
class="count-flop-num"
>
{{ item2 }}
</div>
</div>
<div v-else class="count-flop-content">.</div>
</div>
</div>
</template>
js
<script>
export default {
name: "count-flop",
data() {
return {
value: [],
numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
compKey: 0,
};
},
props: ["val"],
watch: {
val(v) {
if (v) {
this.value = v.toString().split("");
this.compKey += 1;
}
},
},
created() {
if (this.val) {
this.value = this.val.toString().split("");
}
},
};
</script>
css3
<style scoped lang='scss'>
.count-flop {
display: inline-block;
/* 可更改 */
height: 0.45rem;
line-height: 0.45rem;
font-size: 0.3rem;
color: #fff;
font-weight: bold;
}
.count-flop > div {
position: relative;
display: inline-block;
overflow: hidden;
height: 100%;
}
.count-flop-box {
/* 可更改 */
margin-right: 5px;
width: 0.4rem;
// border: 1px solid rgba(72, 152, 241, 0.3);
background: linear-gradient(180deg, #0b50a5 0%, #062853 100%);
line-height: 0.45rem;
border-radius: 0.05rem;
}
.count-flop-point {
/* 可更改 */
margin-right: 5px;
width: 10px;
}
.count-flop-content {
font-family: MicrosoftYaHei-Bold;
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
animation-fill-mode: forwards !important;
}
.rolling_0 {
animation: rolling_0 2.1s ease;
}
@keyframes rolling_0 {
from {
transform: translateY(-90%);
}
to {
transform: translateY(0);
}
}
.rolling_1 {
animation: rolling_1 3s ease;
}
@keyframes rolling_1 {
from {
transform: translateY(0);
}
to {
transform: translateY(-10%);
}
}
.rolling_2 {
animation: rolling_2 2.1s ease;
}
@keyframes rolling_2 {
from {
transform: translateY(0);
}
to {
transform: translateY(-20%);
}
}
.rolling_3 {
animation: rolling_3 3s ease;
}
@keyframes rolling_3 {
from {
transform: translateY(0);
}
to {
transform: translateY(-30%);
}
}
.rolling_4 {
animation: rolling_4 2.1s ease;
}
@keyframes rolling_4 {
from {
transform: translateY(0);
}
to {
transform: translateY(-40%);
}
}
.rolling_5 {
animation: rolling_5 3s ease;
}
@keyframes rolling_5 {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.rolling_6 {
animation: rolling_6 2.1s ease;
}
@keyframes rolling_6 {
from {
transform: translateY(0);
}
to {
transform: translateY(-60%);
}
}
.rolling_7 {
animation: rolling_7 3.1s ease;
}
@keyframes rolling_7 {
from {
transform: translateY(0);
}
to {
transform: translateY(-70%);
}
}
.rolling_8 {
animation: rolling_8 2.1s ease;
}
@keyframes rolling_8 {
from {
transform: translateY(0);
}
to {
transform: translateY(-80%);
}
}
.rolling_9 {
animation: rolling_9 3.6s ease;
}
@keyframes rolling_9 {
from {
transform: translateY(0);
}
to {
transform: translateY(-90%);
}
}
</style>
翻牌器
<template>
<div class="digitalFlopBox">
<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 ,onMounted} from 'vue'
const spanRefs = ref()
const state:any = reactive({
numList: [0,0,0,0,0,0,0,0],
flag: false
})
const changeNum = () => {
state.numList = [2,3,6,4,5,8]
}
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 }
)
onMounted(() => {
setTimeout(() => {
changeNum()
}, 2000);
})
</script>
<style lang="scss" scoped>
.digitalFlopBox {
width: 100%;
height: 54px;
.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: 100%;
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;
}
}
}
}
</style>