framer.motion动画是即时的，而不是动画

Question

我有几个盒子，我想通过它们来做动画，

下面是一个简单的应用程序示例(也是一个codesandbox here)

每个“长方体”应该淡入和淡出，然而，在这个例子中，动画是瞬间发生的。

const Box = styled.div`
  width: 100px;
  height: 100px;
  background: green;
`;

const Test = ({ isActive }) => {
  return (
    <motion.div
      animate={isActive ? { opacity: 1 } : { opacity: 0 }}
      transition={{ duration: 3 }}
    >
      <Box>hello world</Box>
    </motion.div>
  );
};

export default function App() {
  const [currentIndex, setCurrentIndex] = useState(0);

  const boxes = [
    {
      component: ({ isActive }) => <Test isActive={isActive} />
    },
    {
      component: ({ isActive }) => <Test isActive={isActive} />
    }
  ];

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div onClick={() => setCurrentIndex(currentIndex === 0 ? 1 : 0)}>
        {boxes.map((box, index) => {
          const isActive = index === currentIndex;
          return <box.component isActive={isActive} />;
        })}
      </div>
    </div>
  );

Answer 1

我以前从未使用过framer.motion，但查看他们的文档后，我认为您可以使用变体来实现您所需的功能。https://www.framer.com/api/motion/examples/

我稍微重构了你的代码，让它正常工作：

import "./styles.css";
import { motion } from "framer-motion";
import styled from "styled-components";
import { useEffect, useState } from "react";

const Box = styled.div`
  width: 100px;
  height: 100px;
  background: green;
`;

const variants = {
  open: { opacity: 1 },
  closed: { opacity: 0 }
};

const Test = ({ index, currentIndex }) => {
  return (
    <motion.div
      animate={index === currentIndex ? "open" : "closed"}
      variants={variants}
      transition={{ duration: 3 }}
    >
      <Box>hello world</Box>
    </motion.div>
  );
};

export default function App() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const boxes = ["a", "b"];

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{currentIndex}</h2>
      <div onClick={() => setCurrentIndex(currentIndex === 0 ? 1 : 0)}>
        {boxes.map((box, i) => {
          return <Test index={i} currentIndex={currentIndex} />;
        })}
      </div>
    </div>
  );
}

currentIndex作为道具传递给子测试组件，它们检查自己的索引是否与currentIndex匹配，并相应地更新它们的动画。

编辑的代码和框在这里：https://codesandbox.io/s/suspicious-austin-tymvx

Answer 2

在帧运动中，您具有useCycle属性。这是an example。

示例中的代码：

import * as React from "react";
import { render } from "react-dom";
import { Frame, useCycle } from "framer";
import "./styles.css";

export function MyComponent() {
  const [animate, cycle] = useCycle(
    { scale: 1.5, rotate: 0, opacity: 1 },
    { scale: 1.0, rotate: 90, opacity: 0 }
  );
  return (
    <Frame
      animate={animate}
      onTap={() => cycle()}
      size={150}
      radius={30}
      background={"#fff"}
    />
  );
}

const rootElement = document.getElementById("root");
render(<MyComponent />, rootElement);

和一些简单的css：

body {
  margin: 0;
  padding: 0;
}

#root {
  font-family: sans-serif;
  text-align: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  place-content: center;
  place-items: center;
  background: rgba(0, 85, 255, 1);
  margin: 0;
  padding: 0;
  perspective: 1000px;
}

我不建议你使用这种类型的结构：animate={index === currentIndex ? "open" : "closed"}，因为你可能会有一些滞后/中断的动画。请始终尝试搜索MotionAPI库的示例/元素。您将拥有更少的代码行，并且大部分代码是“干净”的，没有无用的变量。