Framer-motion：点击另一个按钮时触发 onTap()答案

【问题标题】：Framer-motion: Fire onTap() when click the other buttonFramer-motion：点击另一个按钮时触发 onTap()
【发布时间】：2023-01-25 21:00:14
【问题描述】：

我有 RotatingButton，它在单击时转动和改变比例。

（旋转必须更慢，所以我使用了两个动作并增加了旋转的持续时间。）

按钮正在向状态添加 +1。 ( 添加值() )

    <div>
      <div>
        <motion.button
          onClick={addValue}
          animate={{ rotate: rotation }}
          transition={{ duration: 0.5, ease: 'easeIn' }}
        >
          <motion.div whileTap={{ scale: 0.8 }}>
            <RotatingButton />
          </motion.div>
        </motion.button>
      </div>
      <div>
        <button onClick={removeValue}>{text}</button>
      </div>
    </div>

但问题是我有第二个按钮，它正在从状态 ( removeValue() ) 中删除 -1 值，它还必须转动和缩放 RotatingButton。

旋转很容易，我添加了依赖项：

  const [rotation, setRotation] = useState<number>(0);

并在每个 addValue() 和 removeValue() 上设置旋转。

  setRotation(rotation + 180);

但问题是我找不到将 RotatingButton 缩放 0.5 秒的方法，例如在触发 removeValue() 时触发 whileTap()。

我试图制作缩放状态并在旋转发生变化时使用 useEffect nad 触发它：

  useEffect(() => {
    setScale(0.8);
    setTimeout(() => {
      setScale(0);
    }, 300);
  }, [rotation]);

我也试过

const controls = useAnimationControls();

使用 controls.start、controls.mount 等。

要以其他方式触发它，使用动画在更改状态时更改比例 0.5 秒，跳过 whileTap。

我也尝试过 onTapStart() 。

这些都没有用。请帮我。

【问题讨论】：

标签： reactjs framer-motion react-tsx

【解决方案1】：

方法是使用序列

https://www.framer.com/motion/use-animation-controls/#sequence

  const controls = useAnimationControls();
  

  const sequence = async () => {
    await controls.start({ scale: 0.8, transition: { duration: 0.5 } });
    return await controls.start({ scale: 1, transition: { duration: 0.5 } });
  };

并将 whileTap() 更改为 animate={controls}

    <motion.button
      onClick={addValue}
      animate={{ rotate: rotation }}
      transition={{ duration: 0.5, ease: 'easeIn' }}
    >
      <motion.div animate={controls}>
        <RotatingButton />
      </motion.div>
    </motion.button>

【讨论】：