javascript - 如何在 React carousal 中为字母表添加动画效果？

Question

我正在尝试像这个 CodePen 一样狂欢使用 React Hooks。

我目前的结果在这个沙盒中:Click..!

我面临的问题是:

1. 我不知道如何像 CodePen 示例中那样制作字母出现并形成文本并散射回来的 CSS 动画效果。
2. 我还想包括在 description={data.desc} 中的描述部分。我是否必须再次拆分或使用任何简单的方法将标题和描述拆分在一起。我的知识滞后于此。

我的代码如下:

import React from "react";

export default function SlideCard(props) {
  const { id, idx, title } = props;

  function mainText() {
    return (
      <div style={{ border: "2px solid gold" }}>
        <h1>{title}</h1>
      </div>
    );
  }
  //console.log(id);
  function scatter() {
    return (
      <div>
        {title.split("").map((item, index) => {
          const style = {
            position: "absolute",
            top: Math.floor(Math.random() * 200) + "px",
            left: Math.floor(Math.random() * 400) + "px",
            zIndex: "initial",
            color: "#AAA",
            overflow: "hidden",
            transition: "left 2s, top 2s, color 2s"
          };

          return (
            <div key={index}>
              <div className="scatter" style={style}>
                {item}
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  return (
    <div>
      <div>{idx === id && mainText()}</div>
      {idx !== id && scatter()}
    </div>
  );
}

Answer 1

他正在维护每个页面数据的两个相同副本。一种是 .position-data 类，另一种是 .mutable 类。 .position-data 是隐藏的，仅用于获取坐标以将 .mutable 字母组合在一起。
这是 CodePen 示例的简化版本:

$(document).ready(function() {
  assemble();
});

function scatter() {
  for (var i = 0; i < 3; i++) {
    var randLeft = Math.floor(Math.random() * $(window).width());
    var randTop = Math.floor(Math.random() * $(window).height());
    //randomly position .mutable elements
    $(".mutable > span:eq(" + i + ")").animate({
      left: randLeft,
      top: randTop,
      color: "#0005"
    }, 2000, "easeInBack");
  }
}

function assemble() {
  for (var i = 0; i < 3; i++) {
    $(".mutable > span:eq(" + i + ")").animate({
      //get center position from .position data marked elements
      left: $(".position-data > span:eq(" + i + ")").offset().left + "px",
      top: $(".position-data > span:eq(" + i + ")").offset().top + "px",
      color: "#000"
    }, 2000, 'easeOutBounce');
  }
}

span {
  font-size: 30px;
}

.position-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.4;
  color: green;
}

.mutable span {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="position-data">
  <span>a</span>
  <span>b</span>
  <span>c</span>
</div>
<div class="mutable shadowed">
  <span>a</span>
  <span>b</span>
  <span>c</span>
</div>
<button onclick="scatter()">Scatter</button>
<button onclick="assemble()">Assemble</button>

I want to position the actively displaying Text container to the centre of the carousal.

主动显示的文本容器用 .mutable 类标记，该类具有以下 css:

    .mutable {
      position: absolute;
      overflow: hidden;
      display: inline-block;
    
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }

所以他们都有文档正文的全尺寸。在 codepen 中使用 javascript 函数 arrangeCurrentPage() 设置坐标，使它们看起来居中。

I don't know how to make that transition effect of the letters coming and forming the text and scattering back as in the CodePen example.

引用上面的简化代码。使用按钮分别查看效果。所有字母元素都放在类为 .mutable 的 div 中。所有字母都是 position: absolute; 所以它们可以自由移动到任何地方。在 javascript 函数 scatter() 中，我只是将 top 和 left 属性分配给随机坐标。有了动画效果，它们会顺利散开。在codepen中他使用css transition transition: left 2s, top 2s, color 2s; 实现动画效果
要将它们带回来，只需使用 css 选择器 nth-child .position-data > span:eq(n) 来获取字符的相应坐标。引用 javascript 函数 assemble()。

I want to include the description part also which is in the description={data.desc}. Do I have to make the split again or any easy method to split both title and description together. I lag knowledge here.

因为标题和描述将以不同的呈现方式分开显示。如果您单独保留它们的拆分版本，代码将会更清晰。您可以创建诸如 split(text)、scramble(array)、arrange(array) 之类的实用方法，并将其用于两者，例如 cramble(titleArray)和scramble(descArray)。

---

如果我们在字母上使用“position:relative”，我们就不必维护相同数据的两个副本:

<!DOCTYPE html>

<head>
  <title>Document</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

  <script>
    $(document).ready(function() {
      assemble();
    });

    function randomX() {
      return Math.floor(Math.random() * $(window).width() * 0.7) - $(window).width() * 0.25;
    }

    function randomY() {
      return Math.floor(Math.random() * $(window).height() * 0.7) - $(window).height() * 0.25;
    }

    function scatter() {
      for (var i = 0; i < 3; i++) {
        $(".mutable > span:eq(" + i + ")").animate({
          left: randomX(),
          top: randomY(),
          color: "#f118"
        }, 2000, "easeInBack");
      }
    }

    function assemble() {
      for (var i = 0; i < 3; i++) {
        $(".mutable > span:eq(" + i + ")").animate({
          left: '0px',
          top: '0px',
          color: "#000"
        }, 2000, 'easeOutBounce');
      }
    }
  </script>
  <style>
    span {
      font-size: 30px;
    }
    
    .mutable {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .mutable span {
      position: relative;  /* <--- */
    }
  </style>

</head>

<body>
  <div class="mutable">
    <span>a</span>
    <span>b</span>
    <span>c</span>
  </div>
  <button onclick="scatter()">Scatter</button>
  <button onclick="assemble()">Assemble</button>
</body>

</html>