我需要将动画更改为onClick

Question

我创建了一个onClick函数来改变我的数据和图像，我的任务和动画就像它上的动画一样，当onClick执行动画时，我还需要设置like fadeUp均值，数据随着动画的变化而上升和消失，你可以看到我的代码沙箱链接，这是我的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;

Code SandBox Link

Answer 1

使用值为transition: opacity 1s的css transition属性，这将使转换在元素的opacity更改时运行1秒。

在组件函数中，获取对您在CSS中为其设置了transition属性同一元素的引用。

在onClick处理程序中使用此引用可将opacity更改为0。这将隐藏元素，但由于转换属性，需要1秒才能完成。

在转换完成1秒后，更改图像和段落数据的源，然后通过将opacity设置为1来使元素可见。使用setTimeout等待1秒。下面是此方法的一个示例。我已经从你的代码中删除了不相关的部分，所以它很容易理解。

.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

Answer 2

以下是您可以做的事情。Put a conditional className with ${count === 2 ? "start-aniamtion-class" : ""} .When count变为2，定义的类中的动画开始。因此，您可以在该类中创建fadeup的@keyframe动画。