Realização do efeito de rolagem digital

O desenvolvimento da tela grande começa na próxima semana, o conteúdo inclui uma grande área de exibição digital e os números precisam ser rolados quando são atualizados. Aproveite este tempo para encerrar um único componente de rolagem numérica

construir a estrutura básica

<div class="box">
  <span class="num">0123456789</span>
</div>

.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  margin-right: 5px;
}
.num {
  font-size: 62px;
}
复制代码

Neste ponto, o efeito resultante é

Se você deseja um efeito de rolagem, precisa alterar os números para uma disposição vertical, para poder adicionar o efeito de mover para cima e para baixo. Neste momento, você precisa adicionar dois atributos css

writing-mode: vertical-lr;
text-orientation: upright;
复制代码

Neste ponto, está um pouco perto do objetivo, e então tudo o que precisamos fazer é mudar a posição da corda para que o número correspondente apareça na caixa. Para alterar a posição, podemos fazer com que a extensão se torne um posicionamento absoluto e, em seguida, operá-la por meio da transformação

.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  margin-right: 5px;

  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
.num {
  position: absolute;
  left: 50%;
  top: 10px;
  font-size: 62px;
  transform: translate(-50%, 0);
}
复制代码

Neste momento, quando você define translate(-50%, 0), exatamente 0 está na caixa, se você definir translate(-50%, -50%), deve ser 5 na caixa

No futuro, só precisamos alterar a configuração translate no transform para perceber os diferentes números que aparecem na caixa. Precisamos encapsulá-lo em um componente geral, que é receber o número passado de fora e, em seguida, definir o translate para obter um efeito geral. Neste momento, podemos usar o A transformação é colocada em nosso estilo. Adicione outra animação, transição: tudo 0,5s;

<template>
  <div class="box">
    <span class="num" :style="`transform: translate(-50%, -${number * 10}%)`">0123456789</span>
  </div>
</template>

<script setup lang="ts">
defineProps({
  number: {
    type: Number,
    default: 5,
    required: true,
  },
});
</script>
复制代码

Neste momento, o efeito de rolagem de texto está quase alcançado. Neste momento, você só precisa adicionar overflow: hidden sob a classe box para ocultar a parte em excesso e, em seguida, o efeito de rolagem digital é obtido. O efeito é como

Este é um pacote simples, o seguinte é o código completo. Aproveite para fazer um registro simples e espere que todos possam discutir e compartilhar outras soluções de implementação.

<template>
  <div class="box">
    <span class="num" :style="`transform: translate(-50%, -${number * 10}%)`">0123456789</span>
  </div>
</template>

<script setup lang="ts">
defineProps({
  number: {
    type: Number,
    default: 5,
    required: true,
  },
});
</script>

<style lang="less" scoped>
.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 5px;

  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
.num {
  position: absolute;
  left: 50%;
  top: 10px;
  font-size: 62px;
  color: #ffffff;
  transition: all 1.5s;
}
</style>

复制代码