Framer Motion 不透明度关键帧仅在初始渲染时设置动画

Question

我正在使用 Framer Motion

盒子应该从 opacity: 0 to 1 开始，并在每次状态切换时增加高度。但是，身高因条件而异。

我不知道为什么“高度”每次都设置动画 - 正确，但“不透明度”仅在第一次渲染时设置动画。

我也试过 [0, 1, 0] 和 [1, 0, 1]，但是 none 达到了预期的效果。
我什至尝试 [0, 1, 0.5] 来更好地测试，但它停留在 0.5.

代码

https://codesandbox.io/s/angry-raman-bc9sf?file=/src/App.js

import { motion } from "framer-motion";
import { useState } from "react";

export default function App({ href = "#", label, icon, notifCount }) {
  const [conditionIsMet, setConditionIsMet] = useState(false);

  const notifVariants = {
    conditionA: {
      opacity: [0, 1],
      height: ["40px", "90px"]
    },

    conditionB: {
      opacity: [0, 1],
      height: ["40px", "200px"]
    }
  };

  return (
    <>
      {`Condition is ${conditionIsMet ? "A" : "B"}`}
      <button onClick={() => setConditionIsMet(!conditionIsMet)} />
      <motion.span
        animate={conditionIsMet ? "conditionA" : "conditionB"}
        variants={notifVariants}
      />
    </>
  );
}

Answer 1

我认为这是一个错误，但作为临时修复，您可以对条件 B 使用 opacity: [0, 1.01]。请为此错误打开一个问题。

Framer Motion 不透明度关键帧仅在初始渲染时设置动画

Framer Motion opacity keyframe only animates on initial render

javascript

css

framer-motion

代码