用 CSS 实现数字切换动画（React 组件封装）

2024-02-11 20:30:20

前言

动画在现代Web开发中扮演着越来越重要的角色，它能为用户带来更加生动、有趣的交互体验。今天，我们将介绍如何使用CSS实现数字切换动画，并将其封装成一个React组件，以便在项目中轻松使用。

1. 原理

数字切换动画的原理其实非常简单。我们可以把0~9的数字全部列出来，排成一列，然后再根据需要展示的数字去对这个数字列进行定位，再利用transition过渡效果实现数字切换动画。这样，当数字发生变化时，只需要改变数字列的位置，就能实现数字的平滑切换。

2. 代码实现

首先，我们需要创建一个空的div元素，并为其设置好样式。这个div元素将作为数字容器，用来容纳0~9的所有数字。

<div class="number-container">
  <div class="digit">0</div>
  <div class="digit">1</div>
  <div class="digit">2</div>
  <div class="digit">3</div>
  <div class="digit">4</div>
  <div class="digit">5</div>
  <div class="digit">6</div>
  <div class="digit">7</div>
  <div class="digit">8</div>
  <div class="digit">9</div>
</div>

接下来，我们需要为数字容器添加CSS样式。首先，我们将数字容器设置为flex布局，并使其高度与数字的高度一致。然后，我们将每个数字设置为绝对定位，并使用transform属性来控制数字的位置。

.number-container {
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
}

.digit {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  transition: transform 0.5s ease-in-out;
}

最后，我们需要添加一个JavaScript脚本，用来控制数字的切换。我们可以使用setInterval函数来定时改变数字容器的transform属性，从而实现数字的平滑切换。

const numberContainer = document.querySelector('.number-container');
const digits = document.querySelectorAll('.digit');

let currentDigit = 0;

setInterval(() => {
  currentDigit = (currentDigit + 1) % 10;

  numberContainer.style.transform = `translateX(-${currentDigit * 50}px)`;
}, 1000);

3. React 组件封装

为了便于在项目中使用，我们可以将数字切换动画封装成一个React组件。我们可以创建一个名为NumberSwitcher的组件，并通过props来控制要显示的数字。

import React, { useState, useEffect } from 'react';

const NumberSwitcher = (props) => {
  const [currentDigit, setCurrentDigit] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentDigit((currentDigit + 1) % 10);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div className="number-container">
      <div className="digit" style={{ transform: `translateX(-${currentDigit * 50}px)` }}>{currentDigit}</div>
    </div>
  );
};

export default NumberSwitcher;