javascript: necesito cambiar la animación y onClick

Creé una función onClick para cambiar mis datos y la imagen de cuál es mi tarea y la animación cuando onClick ejecuta la animación. También agregué que necesito configurarlo como fadeUp, lo que significa que los datos están cambiando su ascenso y desvanecimiento con la animación que puedes VER El enlace de mi código Sandbox, esta es mi aplicación Reactjs.

.parent {
display: flex;
justify-content:space-evenly;
align-items: center;
}
.left img {
  flex: 50%;
  top: 3206px;
left: 164px;
width: 150px;
height: 300px;

animation:ease-in-out 1s;
opacity: 1;
}
.right{
  flex: 50%;
  width: 1%;
  height: 10%;
  right: 15px;
  cursor: pointer;
  color: black;
  font-weight: 500;
  font-size: 1.2em;
  font: normal normal normal 17px/30px Poppins;
  letter-spacing: 0px;
  opacity: 0.9;
  
}
.animation {
  transition: ease-in-out;
transition-delay: 1000s;
color: blue;
transform: translate3d(75%,200%,0);
transform: translate3d(75%,0,0);
transform: translate3d(75%,-100%,0);
}

import { render } from "react-dom";
import React, { useState, useCallback } from "react";
// import { useTransition, animated } from "react-spring";
import "./styles.css";
import image1 from "../img/first.jpg";
import image2 from "../img/second.jpg";
import image3 from "../img/thrid.jpg";

let content = [ "Solytics’ Global Watchlists are a comprehensive collection of caution lists from all major sanctioning bodies, law enforcement agencies and financial regulators worldwide. We continually update, add regulatory and enhanced due diligence data and lists, offering you the most up-to-date and accurate information to help protect your business",
                "We collect, maintain and update record of individuals elected or appointed to a PEP position or their immediate relatives or close associates. The research and identification of such individuals are based on the definition provided by the FATF and expanded definitions offered by the Wolfsberg Group, USA PATRIOT Act, EU Money Laundering Directive and the World Bank, as well as country-specific PEP definitions. The list also includes board members, chairmen, directors and senior executives of state-owned enterprises",
                "Our database currently pull together negative news from ~10mn webpages rom 20,000+ sources for 50+ languages. The crawlers have capability to extract information from Json, Pdf, CSV based data"           
];
const image = [image1, image2, image3];

function App() {
  let [count, setCount] = useState(0);
  const click = () => {
    if (count < 2) {
      setCount(count => count + 1);
    } else {
      setCount(0);
    }
  };

  // window.addEventListener('scroll', onScroll, false)
  return (
    
    <div className="parent">
      
      <div className="left" onClick={click}>
        <img src={image[count]} alt="hello" />
      </div>
      <div className=" right simple-trans-main" onClick={click}>
        <div>
          <p>{content[count]}</p> 
        </div>
      </div>
    </div>
  );
}
export default App;

Enlace de código SandBox

Hola, ¿quieres un efecto de desvanecimiento en el texto, la imagen o ambos?

- Omkar76

28 de marzo de 2021 a las 6:08

desvanecerse en el texto y en la imagen con algún retraso de duración

usuario15463223

28 de marzo de 2021 a las 6:11

------------------------------------

Utilice la propiedad de transición CSS con el valor de transición: opacidad 1. Esto hará que la transición se ejecute durante 1 segundo cuando se cambie la opacidad del elemento.

En la función de su componente, obtenga una referencia al mismo elemento para el que configuró la propiedad de transición en CSS.

Utilice esta referencia en el controlador onClick to cambie la opacidad a 0. Esto ocultará el elemento, pero debido a la propiedad de transición tardará 1 segundo en completarse.

Después de 1 segundo cuando finalice la transición, cambie el origen de la imagen y los datos del párrafo y luego haga visible el elemento estableciendo la opacidad en 1. Utilice setTimeout para esperar 1 segundo. A continuación se muestra un ejemplo de este método. He eliminado partes irrelevantes de tu código para que sea fácil de entender.

.parent {
  transition: opacity 1s;
}

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";
import image1 from "../img/first.jpg";
import image2 from "../img/second.jpg";
import image3 from "../img/thrid.jpg";

const image = [image1, image2, image3];

function App() {
  let [count, setCount] = useState(0);
  const parent = useRef(null);

  const click = () => {
    parent.current.style.opacity = 0;
    setTimeout(() => {
      if (count < 2) {
        setCount((count) => count + 1);
      } else {
        setCount(0);
      }

      parent.current.style.opacity = 1;
    }, 1000);
  };


  return (
    <div className="parent" ref={parent}>
      <div onClick={click}>
        <img src={image[count]} alt="hello" />
      </div>
    </div>
  );
}
export default App;

Pruébalo en codesandbox

------------------------------------

Esto es lo que puedes hacer. ¿Poner un nombre de clase condicional con ${count === 2? "iniciar-clase-aniamción" : ""} .Cuando el recuento llega a 2, comienza la animación en la clase definida. Entonces creas una animación @keyframe de desvanecimiento en esa clase.