分解React 多米诺骨牌：简化版教程

2023-06-12 18:25:27

React 多米诺骨牌：打造令人惊叹的倒塌效果

构建基础结构

第一步是创建我们多米诺骨牌动画的基础结构。我们使用 HTML 和 CSS 来创建一个多米诺骨牌布局。我们可以使用一个包含一系列多米诺骨牌的容器，每个多米诺骨牌都由一个 div 元素表示。

<div class="domino-container">
  <div class="domino"></div>
  <div class="domino"></div>
  <div class="domino"></div>
  ...
</div>

.domino-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.domino {
  width: 20px;
  height: 100px;
  background-color: black;
  margin: 0 5px;
}

添加动画

接下来，我们使用 React 的 useState() 和 useEffect() 钩子为多米诺骨牌添加动画。我们创建一个状态变量来跟踪多米诺骨牌的引用，并使用 useEffect() 钩子在多米诺骨牌倒下时应用动画。

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

const Domino = () => {
  const [dominoes, setDominoes] = useState([]);
  const [isFalling, setIsFalling] = useState(false);

  useEffect(() => {
    if (isFalling) {
      dominoes.forEach((domino, index) => {
        setTimeout(() => {
          domino.classList.add('falling');
        }, index * 100);
      });
    }
  }, [dominoes, isFalling]);

  const startFalling = () => {
    setIsFalling(true);
  };

  return (
    <div className="domino-container">
      {dominoes.map((domino, index) => (
        <div
          className="domino"
          ref={ref => dominoes[index] = ref}
          key={index}
        />
      ))}
      <button onClick={startFalling}>开始</button>
    </div>
  );
};

export default Domino;