使用GatsbyJS对元素onClick进行动画处理
使用GatsbyJS对元素onClick进行动画处理
提问于 2020-08-18 04:44:42
我有一个问题，让一个动画工作正常onClick。在这个网站上：https://cranky-hamilton-77d147.netlify.app/game/我正在尝试在渲染一组新的随机的卡片内容时，使卡片组洗牌和旋转轮旋转，所有这些都只需单击旋转轮即可。
当前，当您在微调器上单击足够多的次数时，两个动画将不同步。我认为这是一个问题，我如何设置状态为真或假，但一直无法让它正常工作。
export default () => {
const [cardIndex, setCardIndex] = useState(0)
const getRandomCardIndexBetween = (min, max) => Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + min
const [isClicked, setAnim] = useState(false);
const toggleAnim = () => {
setAnim(!isClicked);
console.log(isClicked);
return () => {
setAnim(!isClicked);
}
};
return (
<StaticQuery
query={graphql`
query TopicFeed {
allContentfulTopic(filter: {featured: {eq: true}}) {
edges {
node {
cardDescription {
cardDescription
}
cardTitle
id
slug
}
}
}
}
`}
render={data => (
<div>
<section id="topic-section">
<div className='feed'>
<ul className='topic__item--stack'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
{data.allContentfulTopic.edges.map((edge, index) => index === cardIndex
? (
<div key={edge.node.id} className='topic__item draw-card--anim'>
<h2 className='card__title'>{edge.node.cardTitle}</h2>
<div className="card__desc--container">
<p className='card__desc'>{edge.node.cardDescription.cardDescription}</p>
</div>
<div className='card__link' onClick={() => navigate(`/topic/${edge.node.slug}`)}>
<p>Learn More</p>
</div>
</div>
) : null)}
</div>
<div className="spin-wheel--container" onClick={toggleAnim}>
<div className={isClicked ? 'spin-wheel--anim' : ''} onClick={() => setCardIndex(getRandomCardIndexBetween(0, data.allContentfulTopic.edges.length - 1))}>
<svg xmlns="http://www.w3.org/2000/svg" id="spin-wheel" viewBox="0 0 401.1 401">
<title>spin-wheel</title>
<path id="space8" class="cls-1" d="M59 342l47.9-47.9C64.4 248.9 68.2 200.5 68.2 200.5L0.5 200.8S-3.2 281 59 342Z"/>
<path id="space6" class="cls-2" d="M342 59l-47.9 48C336.6 152.1 332.8 200.5 332.8 200.5l67.7-0.3S404.2 120 342 59Z"/>
<path id="space5" class="cls-3" d="M59 59l47.9 48C64.4 152.1 68.2 200.5 68.2 200.5L0.5 200.2S-3.2 120 59 59Z"/>
<path id="space4" class="cls-4" d="M59 59l48 47.9C152.1 64.4 200.5 68.2 200.5 68.2L200.2 0.5S120-3.2 59 59Z"/>
<path id="space3" class="cls-5" d="M59 342l48-47.9C152.1 336.6 200.5 332.8 200.5 332.8L200.2 400.5S120 404.2 59 342Z"/>
<path id="space2" class="cls-6" d="M342 342l-47.9-47.9C248.9 336.6 200.5 332.8 200.5 332.8l0.3 67.7S281 404.2 342 342Z"/>
<path id="space1" class="cls-7" d="M342 59l-47.9 47.9C248.9 64.4 200.5 68.2 200.5 68.2L200.8 0.5S281-3.2 342 59Z"/>
<path id="space8-2" data-name="space8" class="cls-8" d="M400.5 200.7h-67.8c-1.8 62.1-38.8 93.6-38.8 93.6l48.1 47.6S401.5 287.8 400.5 200.7Z"/>
<circle class="cls-9" cx="200.5" cy="200.5" r="200"/>
<circle class="cls-9 white-fill" cx="200.5" cy="200.5" r="132.7"/>
</svg>
</div>
</div>
</section>
</div>
)}
/>
)
}此外，我想知道是否有更好的方式，我应该在第一时间处理动画。使用gatsby/react对这些动画的任何最佳实践都将不胜感激。
回答 1
Stack Overflow用户
发布于 2020-08-19 21:45:31
我会创建一个setTimeOut function，你可以将它传递给OnClick Method，这样它就会禁用微调器，并且只有在动画结束运行后才会激活它，如下所示：
const [disabled, setDisabled] = useState(false);
const ANIM_TIME = 1000;
function spinWheel() {
setDisabled(true);
setCardIndex(getRandomCardIndexBetween(0, data.allContentfulTopic.edges.length - 1))};
setTimeout(() => setDisabled(false), ANIM_TIME)
}
然后，您传递了Onclick卡组件，禁止用户挂起单击它并扰乱了您的状态，我还建议使用标记button来绑定disabled state函数
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63458387
复制相关文章
相似问题
腾讯云开发者
