javascript - 使用 FLIP 技术构建页面布局

问题描述

我是编程的初学者，我正在尝试使用 React 中的 FLIP 技术构建页面布局，但我卡住了，所以我想寻求你的帮助。有关 FLIP 技术的更多信息，请参阅参考 URL。

很快，我想要构建一个页面布局，它由一个主要内容和多个子内容组成，如下图所示，并且可以通过单击子内容来重新定位主要内容。

我找到了一个与我想通过网上冲浪创建的布局类似的布局，并将其作为参考 URL 包含在下面。

・我尝试了什么。

我认为我可以使用钩子、CSS 和 react-flip-toolkit -library- 来实现这一点。事实上，交换两个元素位置的代码很容易实现。

https://codesandbox.io/s/flip-l4o04?file=/src/index.js

但是，我不知道如何编写代码来控制内容数量增加时的行为。react-flip-toolkit使用flipkey作为键，所以如果我只是添加更多的容器，onclick会触发flipper标签中的所有容器，它不会起作用。

https://codesandbox.io/s/flip-test-f3pqb?file=/src/index.js

接下来，我重写了一些代码。

const AnimatedSquare = () => {
  const [active, setActive] = useState(false);
  const toggleActive = () => setActive(prevState => !prevState);

  const [active1, setActive1] = useState(false);
  const toggleActive1 = () => setActive1(prevState => !prevState);

  return (
    <div>
    <Flipper flipKey={active,active1}>
      <div className="box">
      <Flipped flipId="square">
        <div
          className={active ? "square" : "square-active"}
          onClick={toggleActive}/>
      </Flipped>
      <Flipped flipId="square1">
        <div
          className={active1 ? "square-active-1" : "square1"}
          onClick={toggleActive1}/>
      </Flipped>

现在只有被重写的部分代码独立运行，但这还不够好，因为它不能与主要内容重新定位。

·问题

我应该编写什么代码来使每个容器独立运行并将其位置与参考 URL 中所示的主要内容交换？我会很感激你的帮助。

~参考网址~

・关于FLIP技术

・我想像这样建造

标签： javascripthtmlcssreactjs

解决方案

我想这就是你想要的

我只是在正方形上划分活动状态并累积活动正方形类

如果有一天链接停止打开，我附上下面的代码

import React, { useCallback, useState } from "react";
import ReactDOM from "react-dom";
import { Flipper, Flipped } from "react-flip-toolkit";
import "./styles.css";

const AnimatedSquare = () => {
  const [active, setActive] = useState({
    square1: true,
    square2: false,
    square3: false,
    square4: false,
    square5: false
  });
  const handleActive = useCallback(
    (id) => () =>
      setActive({
        square1: false,
        square2: false,
        square3: false,
        square4: false,
        square5: false,
        [id]: true
      }),
    []
  );

  return (
    <div>
      <Flipper flipKey={true}>
        <div className="box">
          <Flipped flipId="square1">
            <div
              className={`square1${active.square1 ? " active" : ""}`}
              onClick={handleActive("square1")}
            ></div>
          </Flipped>
          <Flipped flipId="square2">
            <div
              className={`square2${active.square2 ? " active" : ""}`}
              onClick={handleActive("square2")}
            />
          </Flipped>
        </div>
        <Flipped flipId="square3">
          <div
            className={`square3${active.square3 ? " active" : ""}`}
            onClick={handleActive("square3")}
          />
        </Flipped>
        <Flipped flipId="square4">
          <div
            className={`square4${active.square4 ? " active" : ""}`}
            onClick={handleActive("square4")}
          />
        </Flipped>
        <Flipped flipId="square5">
          <div
            className={`square5${active.square5 ? " active" : ""}`}
            onClick={handleActive("square5")}
          />
        </Flipped>
      </Flipper>
    </div>
  );
};

ReactDOM.render(<AnimatedSquare />, document.querySelector("#root"));

* {
  box-sizing: border-box;
}

body {
  justify-content: left;
  align-items: left;
  min-height: 100vh;
}

.box {
  position: relative;
}

.square1 {
  transition: all 1s;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  width: 17rem;
  height: 12rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, rgb(0, 255, 0), rgb(71, 182, 108));
}

.square2 {
  transition: all 1s;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  width: 17rem;
  height: 12rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, rgb(255, 0, 255), rgb(182, 71, 158));
}

.square3 {
  transition: all 1s;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  width: 17rem;
  height: 12rem;
  cursor: pointer;
  background-image: linear-gradient(
    45deg,
    rgb(113, 206, 234),
    rgb(60, 107, 170)
  );
}

.square4 {
  transition: all 1s;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  width: 17rem;
  height: 12rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, rgb(253, 72, 0), rgb(170, 110, 60));
}

.square5 {
  transition: all 1s;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  width: 17rem;
  height: 12rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, rgb(255, 0, 0), rgb(182, 71, 71));
}

.active {
  position: fixed;
  top: 0;
  transform: translateX(300px);
  width: 75rem;
  height: 50rem;
  cursor: pointer;
}

javascript - 使用 FLIP 技术构建页面布局

问题描述

解决方案

推荐阅读