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

Question

I'm new to react and i made three cards and i used framer motion for the animation. i want when i click the one cards the animation start but the animation start on all the three cards how can i add a condition to framer motion animation?

sandbox link: https://codesandbox.io/s/angry-microservice-tllp80?file=/src/App.js

and here is my code

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

What you need to do is create a component that handles the animation control itself and use it on elements map

Here is an example:

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>
  );
}