Javascript 我正在尝试在React Hangman应用程序中设置字母数组的动画 问题

我正在尝试使用react spring为我的Hangman应用程序中的数组中的字母设置动画。我希望它们在加载时淡入，在从阵列中移除时淡出。单击即可将其从阵列中删除。现在我只想让它们淡入淡出。我得到的最接近的是和以前一样的按钮，但它是滞后的，根本没有动画

我尝试过使用Spring组件、Transition组件和UseTransformation

这是我试图解决的最新例子。

应用程序---为了可读性，没有包括所有useState函数或helper函数

const-App=（）=>{
const[availabletters，setavailabletters]=useState([
“a”，
“b”，
"c",，
“d”，
"e",，
"f",，
"g",，
"h",，
“我”，
"j",，
"k",，
“l”，
“m”，
"n",，
"o",，
"p",，
"q",，
“r”，
“s”，
"t",，
"u",，
"v",，
“w”，
“x”，
“y”，
“z”
])
const location=useLocation（）
const transitions=useTransition（location，location=>location.pathname{
from:{opacity:0，transform:'translate（100%，0）}，
输入：{opacity:1，transform:'translate（0,0）}，
左：{opacity:0，transform:'translate（-50%，0）}
})
返回(
{msgAlerts.map（（msgAlert，index）=>(
))}
{/*路由*/}
{transitions.map（{item，props，key}）=>(
{/*主页*/}
(
)}
/>
(
)}
/>
(
)}
/>
))}
)
}
导出默认应用程序

相关Play.js代码。这就是我现在正在尝试的，但是什么也没有出现，根本没有信

从'react Spring/renderprops'导入{Spring，动画，Transition}
从“./ClickableLetter”导入ClickableLetter
const AnimatedLetter=已设置动画（ClickableLetter）
常量播放=（{'t吨道具我不显示'}）=>{
const availHTML=availableLetters.map（（字母、索引）=>(
{style=>(
)}
))
返回(
{availHTML}
)
}

原始工作代码

const availHtml=availableLetters.map（字母=>(
))

ClickableLetter.js

从“React”导入React
从“react router dom”导入{withRouter}
从“../Shared/Styled”导入{PrimaryButton}
//这些是绿色字母，用于让用户猜测字母
常量ClickableLetter=({
信件、机密、推送更正、推送更正、可移除、gameOver、msgAlert
}) => {
//此函数用于将值推送到正确或不正确的数组，从而导致应用程序范围内的状态更改并重新渲染
常量pushValue=（）=>{
如果（！gameOver）{
if（secret.toLowerCase（）.includes（字母））{
pushToCorrect（字母）
}否则{
pushToIncorrect（字母）
}
//从Availetter arr获取，用更少的一个字母重新渲染此组件
可移除（字母）
}否则{
msgAlert({
标题：“哎呀！”，
消息：“游戏结束，请单击“重置”再次玩”，
变体：“危险”
})
}
}
返回(
{字母}
)
}
使用路由器导出默认值（ClickableLetter）

其他尝试

const transitions=useTransition（可用的选项，项=>item{
发件人：{opacity:0}，
输入：{opacity:1}，
左：{不透明度：0}
})
const availHTML=transitions.map（{item，props，key}）=>
)

我的另一个尝试是使用animated.div而不是animated（ClickableLetter），在div内部呈现ClickableLetter。（没有代码，因此这不准确）

const availHTML=transitions.map（{item，props，key}）=>
))

好的，过了一会儿我就明白了。首先，我需要使我的自定义组件动画就绪

const AnimatedClickableLetter=已设置动画（ClickableLetter）

然后我使用了Transition组件，我还没有弄清楚如何使用UseTransformation来实现这一点。我试过了，但没有成功

const availHTML=(
item}//unique key，在本例中，字母没有问题
from={{opacity:1}}//动画道具
输入={{opacity:1}}
左={{不透明度：0}}
>
{letter=>props=>//为每个字母制作一个动画Clickableletter。。
//道具将是动画风格。