带有“layout”道具的 Framer Motion 没有动画答案

【问题标题】：Framer Motion with `layout` Prop Not Animating带有“layout”道具的 Framer Motion 没有动画
【发布时间】：2023-02-01 08:34:42
【问题描述】：

我在某个网格列中有一个元素。当我单击一个按钮时，我希望该元素移动到不同的列并使移动具有动画效果。下面是相关代码。

const [textLocation, setTextLocation] = useState(1);

const moveText = () => {
  setTextLocation(textLocation + 1);
}

<div className="grid grid-cols-12">
  <motion.div layout className={`bg-red-300 col-start-${textLocation}`}>
    Text
  </motion.div>
</div>

<button onClick={moveText}>
  Move Text
</button>

根据 framer-motion 文档，如果设置了 layout 属性，则只要元素的样式发生变化，就应该有一个动画。在我的例子中，我使用 TailwindCSS 来设置我的组件的样式，并且我正在通过 col-start-${textLocation} 更改列的起始位置。

动画不起作用，但奇怪的是它可以为 col-start-{x} 的某些值正确设置动画。例如，col-start-2 不起作用，但 col-start-3 起作用。这似乎也不一致。

任何帮助，将不胜感激。

【问题讨论】：

标签： reactjs tailwind-css framer-motion

【解决方案1】：

肯定为时已晚，但如果有人需要这个，你不能在 tailwind 中使用字符串文字，col-start-${textLocation} 会为 textLocation = 3 提供 col-start-3，但 tailwind 不会处理它。

【讨论】：