我有一个React应用程序,它有一个卡片网格。我添加了一些JavaScript沿着CSS转换来动画卡片翻转。点击后,卡片会翻到后面,等待2秒后自动翻回到前面。这是我的密码isQuestionAnswered
和isCorrect
是从父组件传递下来的属性。
const [isFlipped, setIsFlipped] = useState(false);
const [trigger, setTrigger] = useState(0);
useEffect(() => {
if (isFlipped || !trigger) return;
updateScore(points);
}, [isFlipped]);
function flipCard() {
if (!isQuestionAnswered || !isCorrect) return;
setIsFlipped(true);
setTimeout(() => {
setTrigger((prevState) => prevState + 1);
setIsFlipped(false);
}, 2000)
}
字符串
我想在转换完成后运行updateScore()
函数(另一个 prop )(因此在卡片翻回正面后)。但是,updateScore()
函数将在isFlipped
状态设置回false后立即运行。然后,updateScore()
函数将isQuestionAnswered
设置为false,然后才会发生翻转转换(需要0.8秒才能完成)。如何在转换完成后运行updateScore()
函数?
我试过不使用useEffect
钩子和trigger
状态,只在flipCard
函数的超时内运行updateScore()
。我还尝试在updateScore()
中使用setTimeout
,在0.8秒延迟(转换发生的时间)后将isQuestionAnswered
设置为true,但这两种方法都不起作用。
下面是当前的updateScore()
函数:
function updateScore(points) {
setScore((prevState) => prevState + points);
setIsQuestionAnswered(false);
}
型
1条答案
按热度按时间vcudknz31#
快速回答:你可以使用
onTransitionEnd
或onAnimationEnd
,注意我们是如何使用React名称的。说明
首先,我们创建一个新的状态来保存我们的timeoutId。这是一个很好的实践,以防用户导航离开我们想要取消超时的页面。
字符串
然后我们修改
flipCard
函数,在它启动之前清除旧的超时,然后它将通过将savedTimeoutId
返回到调度函数来设置savedTimeoutId
。阅读更多基于上一个状态更新状态- React。我们还修改了useEffect,以便在我们可以翻回前面之前卸载组件时取消超时。
型
最后,当我们翻到前面时,将一些功能
onTransitionEnd
附加到updateScore型
请注意,每次运行
flipCard()
时,它都会重置计时器(因为它会取消旧的超时并创建一个新的超时)。根据需要进行修改。View demo at CodeSandbox