翻牌器 数字滚动 大屏可视化（vue2写法）

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>