React Framer Motion 在颜色过渡之间答案

【问题标题】：React Framer Motion in-between color transitionReact Framer Motion 在颜色过渡之间
【发布时间】：2021-10-27 16:11:54
【问题描述】：

我正在使用framer-motion 在悬停时为Icon 组件设置动画，如下所示：

<Icon
    initial={{ scale: 1, color: "#B9BBBE" }}
    whileHover={{
        scale: 1.15,
        color: "#FFCC4D",
    }}
    transition={{ type: "spring", stiffness: 500 }}
>
    <Emoji />
</Icon>

Icon 包含一个简单的 SVG Emoji，带有灰色 #B9BBBE，我也在 initial 属性中使用了这种颜色。

我需要从那个过渡到黄色#FFCC4D，但是当我移出图标时，它会从黄色过渡回蓝色阴影，然后是初始灰色。

我不知道如何从黄色直接过渡到灰色，中间没有任何奇怪的颜色。

我也尝试如下传递一个数组，但仍然得到相同的结果：

whileHover={{
    scale: 1.15,
    color: ["#B9BBBE", "#FFCC4D"],
}}

【问题讨论】：

你能在codesandbox.io上复制吗？我已经尝试过使用 div ，乍一看它工作正常codesandbox.io/s/…
@Danila 感谢您的回复，在这个方形 div 示例中不是很明显，但是当您移出 div 时，颜色过渡会通过色轮，直到它最终出现在初始灰色，您还可以看到，当您检查元素的 css 时，您会看到 css rgb 属性通过数字 & 我猜这是原因，但我不知道如何避免它..
这是我记录的我的图标行为方式的 Gif：imgur.com/a/izweAcA，你可以清楚地看到蓝色过渡，然后它以初始灰色结束。
@Danila 哦，事实上，transition={{ type: "spring", stiffness: 500 }} 是造成这种情况的原因：codesandbox.io/s/… 您现在可以清楚地看到 div 变蓝了。如果您知道为什么会这样。

标签： css reactjs framer-motion

【解决方案1】：

我猜刚度会产生这种颜色“反弹”：

弹簧的刚度决定了弹簧的速度以及在弹簧稳定和动画结束之前弹簧弹跳的次数。

因此，您只需为scale 属性应用弹簧和刚度以实现反弹效果，并保持颜色不变：

      <motion.div
        style={{ height: 100, width: 100 }}
        initial={{ scale: 1, backgroundColor: '#B9BBBE' }}
        whileHover={{
          scale: 1.15,
          backgroundColor: '#FFCC4D'
        }}
        transition={{ scale: { type: 'spring', stiffness: 500 } }}
      ></motion.div>

Codesandbox

【讨论】：

你说得对，谢谢！