如何为成帧器运动添加条件 animation

Question

我是新手，我制作了三张卡片，并为 animation 使用了成帧器动作。 我想当我单击一张卡时 animation 启动但 animation 在所有三张卡上启动我如何为成帧器运动添加条件 animation？

沙盒链接： https://codesandbox.io/s/angry-microservice-tllp80?file=/src/App.js

这是我的代码

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


export default function App() {
  const [elements,setElements]=useState(['one','two','three'])
  const controls = useAnimationControls()


  return (
    <section className="App">
      {
        elements.map((Element,index)=>(
          <motion.div key={index}  animate={controls} onClick={()=>controls.start({ scale: 2 })}>{Element}</motion.div>
        ))
      }   
    </section>
  );
} 

Answer 1

您需要做的是创建一个组件来处理 animation 控件本身并将其用于元素 map

这是一个例子：

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


const Card = ({index, Element}) => {

  const controls = useAnimationControls()

  return <motion.div key={index}  animate={controls} onClick={()=>controls.start({ scale: 2 })}>{Element}</motion.div>

}


export default function App() {
  const [elements,setElements]=useState(['one','two','three'])
 

  return (
    <section className="App">
      {
        elements.map((Element,index)=><Card index={index} Element={Element}/>)
      }   
    </section>
  );
}