如何在成帧器运动中延迟动画，而不是 whileOver 或 WhileTap？答案

【问题标题】：How do I delay animate, not whileOver or WhileTap in framer motion?如何在成帧器运动中延迟动画，而不是 whileOver 或 WhileTap？
【发布时间】：2022-01-16 19:09:18
【问题描述】：

我想在组件安装时延迟映射出每个按钮的动画，而不是在悬停或单击按钮时。现在我总是得到延迟。

有什么想法吗？

<motion.button
                className={distanse === place ? "aktiv" : null}
                initial={{
                  opacity: 0,
                  y: -200,
                  rotate: 180,
                }}
                animate={{ opacity: 1, y: 0, rotate: 0 }}
                transition={{
                  type: "spring",
                  stiffness: 150,
                  delay: Math.random(),
                  duration: 2,
                }}
                whileHover={{ scale: 1.3 }}
                whileTap={{ scale: 0.9, rotate: 45 }}
                key={i}
                type="button"
                value={place}
                onClick={handleDistanceChange}
              >
                {place === "10km" ? "Mål" : place}
              </motion.button>

【问题讨论】：

标签： reactjs animation framer-motion

【解决方案1】：

我相信您可以为动画对象本身添加一个过渡键：

animate={{
    opacity: 1,
    y: 0, 
    rotate: 0,
    transition: {
        type: "spring",
        stiffness: 150,
        delay: Math.random(),
        duration: 2,
    }
}}

或者，如果这不起作用，我可以在此处的文档中查看：https://www.framer.com/docs/gestures/

<motion.button
  whileHover={{
    scale: 1.2,
    transition: { duration: 1 },
  }}
  whileTap={{ scale: 0.9 }}
/>

您可以将此模式与手势对象一起使用，因此您可以取消其中的过渡。

【讨论】：

很好，动画中的过渡效果很好。谢谢！