使用GatsbyJS的动画元素onClick

问题描述

我无法让动画在onClick上正常工作。 在这个网站上：https://cranky-hamilton-77d147.netlify.app/game/我试图为卡片组改组和转盘旋转动画，同时渲染一组新的随机卡片内容，全部单击转盘。

当前，当您单击微调器足够的时间时，这两个动画不同步。我认为这是关于如何将状态设置为true或false的问题，但一直无法使其正常工作。

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的动画的任何最佳做法将不胜感激。

解决方法

我将创建一个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)
}

然后，您通过了disabled state卡组件，不允许用户挂起它并弄乱了您的状态，我也建议您使用标签button来绑定Onclick函数