React 应用程序中我的滑块中的动画卡组件无法正常工作

Question

我的 React 应用程序中有一个滑块，当单击任何图标按钮时，它会滑动我的卡片组件。单击时，我希望每张卡片都显示淡入淡出动画，但它仅在页面重新加载时有效。我正在使用 css 动画。我正在使用以下代码


 <div className={classes.root}>
      <div className={classes.slider}>
        <Card image={carddata[slider].image} slider />
      </div>

      <ArrowBackIosIcon
        fontSize="large"
        style={{ left: 0 }}
        className={classes.arrow}
        onClick={prevSlide}
      />
      <ArrowForwardIosIcon
        fontSize="large"
        style={{ right: 0 }}
        className={classes.arrow}
        onClick={nextSlide}
      />
    </div>

CSSclass正在关注

 slider: {
    animation: 'fadeeffect 3000ms linear 250ms',
  },

 @keyframes fadeeffect: {
    "0%": {
      opacity: 0,
    },
    "25%": {
      opacity: 0.25,
    },
    "50%": {
      opacity: 0.5,
    },
    "100%": {
      opacity: 1,
    },
  },

Answer 1

当您想要显示图像时，您必须添加 slider class，但您是在加载时添加它，例如在单击时。我提供了一个沙盒示例来向您展示如何操作：

import { useRef } from "react";
const myRef = useRef(null);

const handleClick = ()=>{
myRef.current.classList.add('slider');
}

 <div className={classes.root}>

      <button onClick={handleClick}>Show The Element</button>

      <div /*className={classes.slider}*/ ref={myRef} >
        <Card image={carddata[slider].image} slider />
      </div>

      <ArrowBackIosIcon
        fontSize="large"
        style={{ left: 0 }}
        className={classes.arrow}
        onClick={prevSlide}
      />
      <ArrowForwardIosIcon
        fontSize="large"
        style={{ right: 0 }}
        className={classes.arrow}
        onClick={nextSlide}
      />
</div>

React 应用程序中我的滑块中的动画卡组件无法正常工作

Animating Card components in my slider in react app not working

javascript

css

css-animations

reactjs