- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是编程初学者,我正在尝试使用 React 中的 FLIP 技术构建页面布局,但我卡住了,所以我想寻求您的帮助。有关 FLIP 技术的更多信息,请参阅引用 URL。
很快,我想构建一个页面布局,它由一个主要内容和多个子内容组成,如下图所示,可以通过单击子内容与主要内容重新定位。
我找到了一种类似于我想通过网上冲浪创建的布局,并将其包含在下面作为引用 URL。
・我试过的。
我认为我可以使用钩子(Hook)、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>
最佳答案
我想this is你想要什么
我只是在正方形上划分事件状态并累积事件正方形类
如果有一天链接停止打开,我附上下面的代码
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 技术构建页面布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69024998/
原谅那个疯狂的标题... 我试图理解面向对象编程中继承与接口(interface)的概念。所以我试图将它与我已经知道的东西联系起来,这就是 CSS。 在 CSS 中,您可以选择在允许元素“继承”样式的
我有一个 C 函数,它返回一个表示二进制数据的 unsigned char*。我在文档中注意到 SWIG 有一个很好的类型映射来处理二进制数据作为 C 函数的输入,但是当 C 函数返回二进制数据及其无
过去遇到过几次类似的问题,想知道用什么语言(方法)来解决类似的问题(我是J2EE/java开发人员): 问题:在一组可能的单词中,根据给定的规则(假设单词可以是 A 和 X 的组合,并且始终以 X 开
这个问题不太可能帮助任何 future 的访客;它只与一个小地理区域、一个特定时刻或一个非常狭窄的情况相关,而这些情况通常不适用于互联网的全局受众。如需帮助使这个问题更广泛地适用,visit the
如果我们已经开发了自己的ORM框架并且该框架在过去的几年中运行良好,那么为什么我们要为即将到来的软件项目学习和使用全新的.net技术,例如LINQ或Entity Framework或NHibernat
即使听起来很奇怪,我相信每个人在处理具有大量自定义组件的大型应用程序时都遇到过此类问题。某个地方生成了 AV,但应用程序仍在继续执行,稍后会出现错误。我不是在谈论多线程应用程序。只是关于通用的单线程应
我正在设计一个新项目,我正在尝试找出将数据/事件从服务器应用程序推送到客户端应用程序(即 WPF 应用程序)的方法。 我知道的两个是: 发布/订阅(即 NServiceBus) Full Duplex
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 5年前关闭。 Improve thi
这个问题在这里已经有了答案: C# .NET: How to check if we're running on battery? (6 个答案) 关闭 9 年前。 我发现许多 API 可以帮助确定
没有 JQUERY!我有一个下拉列表,用户可以在其中选择日期、月份和年份。我创建以下代码并使用 setFullYear 将这些值传递到变量中。有时我还会向这个变量添加天数,这就是变量 ev_num 的
我有一个控件,我想在表单和打印时以不同的方式绘制它。这是我做的方式: private void printDocument1_PrintPage(object sender, System.Drawi
我正在尝试确定从扫描文档中提取手写数据的最佳方法。 手写数据位于特定的方框区域。我生成了文档的数字版本,因此我知道方框区域的坐标,并且如果需要还可以生成文档的其他变体(即被屏蔽以使字段更容易提取的版本
背景 对于基于音乐的问题,我深表歉意,但细节并没有那么重要。我正在按顺序浏览一个 midi 文件,我正在寻找一种有效的方法来查找数据中的模式以找到称为连音符的东西。见下图: 连音符上方有数字(3 或
经验丰富的 Java 新手,寻求您的智慧: 如果无法确保在对象超出范围时执行某些特定的 block 代码,那么还有哪些其他方法可以提供相同的功能?(看起来 finalize 显然不是那个意思) 一个典
我正在玩一个小的油漆应用程序。我想创建不同的画笔提示(不仅仅是简单的线条)。基本思想是沿着鼠标移动重复(冲压)画笔 Nib 。因为鼠标移动不会为鼠标移动的每个像素分派(dispatch)所需的事件。我
我正在制作时间表应用程序。重要的类是: Period id: int clazz: Clazz SubjectTeacher subject: String teac
关闭。这个问题需要更多 focused .它目前不接受答案。 想要改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this q
我有一个奇怪的任务要解决。我们有一个小型视频窗口(如 300x200 像素,256 色调色板)和 44kHz 2ch 声音在服务器上播放。我们需要将此流视频发送给一些客户端(1,2.. 最多 10 个
我很确定我在这里遗漏了一些东西,因为我对 Shapeless 还很陌生并且我正在学习,但是 Aux 技术实际上什么时候开始需要 ?我看到它是用来暴露一个 type通过将其提升为另一个“同伴”的签名来声
微软有什么理由仍然坚持使用 COM 技术(Office 组件仍然是 COM)……当所有用 COM 完成的事情都可以用 .Net 以更好、更有效的方式完成时 最佳答案 因为它需要一个 长完全重写Offi
我是一名优秀的程序员,十分优秀!