javascript - 每次单击元素时如何使转换工作
问题描述
我正在尝试使用 React-Spring 库中的 'useTransition' 和 'animated' 并且遇到一个问题,即它只在第一次动画时,也没有激活离开。
通过深入研究,我认为这与密钥没有更新这一事实有关,我认为这就是使新动画能够渲染的原因,但我不知道如何获取密钥以更新而不是刷新这页纸。
function App() {
const [showApplicants, setShowApplicants] = useState(false);
const [showSpecificApplicant, setShowSpecificApplicant] = useState([]);
const [applicants, setApplicants] = useState([
{
firstName: "Billy",
background: "Employed",
id: 1
},
{
firstName: "Sarah",
background: "Employed",
id: 2
},
{
firstName: "Vera",
background: "Student",
id: 3
},
{
firstName: "Albert",
background: "Unemployed",
id: 4
}
]);
const transitions = useTransition(applicants, item => item.id, {
from: {
transform: "translate(-100%, 0)"
},
enter: {
transform: "translate(0%,0)"
},
leave: {
transform: "translate(150%, 0)"
},
config: { duration: 3000 }
});
const handleApplicants = () => {
setShowApplicants(!showApplicants);
setShowSpecificApplicant([]);
};
const showDetails = (e, item) => {
setShowSpecificApplicant(item.id);
};
const SpecificApplicant = () => {
const matchedUser = applicants.find(
user => user.id === showSpecificApplicant
);
return transitions.map(({ item, key, props }) => {
return showSpecificApplicant === item.id ? (
<animated.div key={key} style={props}>
<div
style={{
background: "lightblue",
width: "20%",
margin: "0 auto",
textAlign: "center",
borderRadius: "5px",
padding: "10px",
display: "flex",
flexDirection: "column"
}}
>
<h3 style={{ margin: "0", padding: "0" }}>
{matchedUser.firstName}
</h3>
<p> Current Status: {matchedUser.background}</p>
</div>
</animated.div>
) : null;
});
};
return (
<div className="App">
<h1>Hello</h1>
<button onClick={handleApplicants}> Show Applicants </button>
<ul>
{showApplicants &&
applicants.map(item => (
<button onClick={e => showDetails(e, item)}>
{item.firstName}
</button>
))}
</ul>
<SpecificApplicant />
</div>
);
}
我希望每次单击申请人时都会触发动画,但它仅在第一次时才动画。之后他们就正常出现了。谁能告诉我我做错了什么。
解决方案
转换必须处理数组的变化。所以在 useTransition 中将申请者数组更改为 showSpecificApplicant 数组。这样,它将为新数组元素应用进入动画,为从数组中删除的元素应用离开动画。
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { useTransition, animated } from 'react-spring';
import './styles.css';
function App() {
const [showApplicants, setShowApplicants] = useState(false);
const [showSpecificApplicant, setShowSpecificApplicant] = useState([]);
const [applicants, setApplicants] = useState([
{
firstName: 'Billy',
background: 'Employed',
id: 1
},
{
firstName: 'Sarah',
background: 'Employed',
id: 2
},
{
firstName: 'Vera',
background: 'Student',
id: 3
},
{
firstName: 'Albert',
background: 'Unemployed',
id: 4
}
]);
const transitions = useTransition(showSpecificApplicant, item => item.id, {
from: {
transform: 'translate(-100%, 0)'
},
enter: {
transform: 'translate(0%,0)'
},
leave: {
transform: 'translate(150%, 0)'
}
});
const handleApplicants = () => {
setShowApplicants(!showApplicants);
setShowSpecificApplicant([]);
};
const showDetails = (e, item) => {
setShowSpecificApplicant([item]);
};
const SpecificApplicant = () => {
return transitions.map(({ item: matchedUser, key, props }) => {
return (
<animated.div key={key} style={props}>
<div
style={{
background: 'lightblue',
width: '20%',
margin: '0 auto',
textAlign: 'center',
borderRadius: '5px',
padding: '10px',
display: 'flex',
flexDirection: 'column'
}}
>
<h3 style={{ margin: '0', padding: '0' }}>
{matchedUser.firstName}
</h3>
<p> Current Status: {matchedUser.background}</p>
</div>
</animated.div>
);
});
};
return (
<div className="App">
<h1>Hello</h1>
<button onClick={handleApplicants}> Show Applicants </button>
<ul>
{showApplicants &&
applicants.map(item => (
<button onClick={e => showDetails(e, item)}>
{item.firstName}
</button>
))}
</ul>
<SpecificApplicant />
</div>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
你可以在这里看到结果:https ://codesandbox.io/s/jolly-glade-mbzl7
现在您可能希望在转换期间将申请人的样式更改为在同一行中。如果您添加position: 'absolute'
到 from 对象,那么您就在正确的轨道上。
推荐阅读
- python - Matplotlib 填充曲面下方和曲面之间
- angular - 在网络应用和移动应用中嵌入私人 Vimeo 视频——Ionic/Angular
- regex - 正则表达式查找复合词
- r - Shinydashboard 动态 TabPanel
- c# - Webapi 单参数的流利验证
- php - 获得alexa排名但file_get_content在php的实时服务器中不起作用
- kotlin - Rx - 将新输入与之前的输出相结合
- r - 如何在没有行/列引用的情况下动态提取R中给定行值的列数据
- image - 如何从 docker .tar 文件夹创建 .img 文件
- android - 如何在没有 aLogcat 应用程序的 android 智能手机中查找活动日志文件?