Framer motion - 如何进行简单的 css 颜色过渡

Question

我想做这个颜色过渡效果，但是在 framer motion 方式中

css 例子 https://codepen.io/impressivewebs/pen/zqpEg

这是我尝试过的方法，但没有奏效

     transition:{
    delay:2,
    backgroundColor: "1.5s ease"
  }

我的尝试

https://codesandbox.io/s/variants-framer-motion-forked-m3qui

谢谢

Answer 1

根据文档，如果您使用变体，可以像这样使用背景颜色属性。希望这对您有所帮助 ;)

这是工作代码笔： https://codesandbox.io/s/variants-framer-motion-forked-9y3lo?file=/src/App.js

  const variants = {
    hidden: {
      height: 100,
      width: 100
    },
    visible: {
      backgroundColor: ["#60F", "#09F", "#FA0"],
      transition: {
        delay: 1,
        duration: 2,
        ease: [0.075, 0.82, 0.165, 1],
        repeat: Infinity,
        repeatType: "reverse"
      }
    }
  };

Framer motion - 如何进行简单的 css 颜色过渡

Framer motion - How to do a simple css color transition

reactjs

framer-motion