title: I can not find a way to get a css transition on an element everytime it gets created in React
body: <p>I can not find a way to get a css transition on an element everytime it gets created in React.
  I created a simple app with few components and a context in React.
  I would like a transition of opacity on every "Project" component that get created.. But I can not figure how. I manage to change class everytime I click on a "Project" component but I would like a transition everytime I am creating one. Should I use setTimeOut somewhere ? Should I use the useEffect ?</p>
  
  <p>Here is my code :</p>
  
  <pre><code>// This is my Context
  
  import React, { createContext, useState, useEffect } from "react";
  
  export const Context = createContext();
  
  export const ContextProvider = (props) =&gt; {
    const [currentProjects, setCurrentProjects] = useState(() =&gt; {
      const localData = localStorage.getItem("currentProjects");
      return localData ? JSON.parse(localData) : [];
    });
  
    useEffect(() =&gt; {
      localStorage.setItem("currentProjects", JSON.stringify(currentProjects));
      console.log("currentProjects got updated");
    }, [currentProjects]);
  
    return (
      &lt;Context.Provider value={[currentProjects, setCurrentProjects]}&gt;
        {props.children}
      &lt;/Context.Provider&gt;
    );
  };
  </code></pre>
  
  <p>// This is my ProjectList Component</p>
  
  <pre><code>import React, { useContext, useEffect } from "react";
  import Project from "./Project.js";
  import { Context } from "./Context.js";
  import "./ProjectList.css";
  
  const ProjectList = () =&gt; {
    const [currentProjects, setCurrentProjects] = useContext(Context);
  
  
    return (
      &lt;div className="ProjectListContainer"&gt;
        {currentProjects.map((item) =&gt; {
          return (
            &lt;Project
              artist={item.artist}
              project={item.project}
              label={item.label}
            /&gt;
          );
        })}
      &lt;/div&gt;
    );
  };
  
  export default ProjectList;
  </code></pre>
  
  <p>// This is my Project Component</p>
  
  <pre><code>import React, { useContext, useEffect, useState, Component } from "react";
  import "./Project.css";
  
  const Project = ({ artist, project, label, light }) =&gt; {
    //   const [status, setStatus] = useState({ clicked: false });
    //   const divGotCliked = (e) =&gt; {
    //     setStatus({ clicked: !status.clicked });
    //   };
  
    return (
      &lt;div className="ProjectContainer"&gt;
        &lt;div className="container1"&gt;
          &lt;div&gt;
            &lt;h2&gt;{artist} &lt;/h2&gt;
            &lt;h2&gt;{project} &lt;/h2&gt;
            &lt;h2&gt;{label} &lt;/h2&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Project;
  </code></pre>