I need to change animation an onClick

Admin 1
Viewed 95

I created an onClick function to change my data and image what my task to and animation on it like when onClick execute animation also added I need to set like fadeUp mean mean data is changing its go up and fade with animation you can SEE my code sandbox link this is my Reactjs app.

.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;

Code SandBox Link

reactjs css html javascript
2 Answers

Here is what you can do. Put a conditional className with ${count === 2 ? "start-aniamtion-class" : ""} .When count becomes 2, animation in the defined class starts. So you create @keyframe animation of fadeup in that class.

user_128328670

Use css transition property with value transition: opacity 1s this will make the transition run for 1 second when opacity of element is changed.

In your component function, get a reference to same element that you have set transition property for in CSS.

Use this reference in onClick handler to change the opacity to 0. This will hide element but due to transition property it'll take 1 second to complete.

After 1 second when transition finishes, change the src of image and data of paragraph and then make element visible by setting opacity to 1. Use setTimeout to wait for 1 second. Below is an example of this method. I have removed irrelevant parts from your code so it's easy to understand.

.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;

Try on codesandbox

user_124856390
Related