幻灯片过渡在第一张幻灯片后停止工作

Question

我正在创建一个滑块，当我按下 prev 或 next 按钮时，图像应该以过渡效果进入。问题是过渡仅在页面首次加载时有效，而在第一次渲染后无效。我需要在每次点击时进行转换，并将转换应用于部分元素类。如果有人知道解决方案，请帮助我。

const SlideShowTop = (props) => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const previous = () => {
    if (selectedIndex !== 0) {
      setSelectedIndex((index) => index - 1);
    }
    if (selectedIndex === 0) {
      setSelectedIndex(props.slides.length - 1);
    }
  };

  const next = () => {
    if (selectedIndex !== props.slides.length - 1) {
      setSelectedIndex((index) => index + 1);
    }
    if (selectedIndex === props.slides.length - 1) {
      setSelectedIndex(0);
    }
  };

  const filteredSlide = props.slides.filter((data) => {
    return data.index === selectedIndex;
  });

  const sliderList = filteredSlide.map((slideProp, index) => {
    const getImg = require("../assets/" + slideProp.picture).default;
    return (
      <section className={classes.transitions}>
//to this section applying the transition

        <li
          className={`${[classes.banner]} `}
          style={{
            backgroundImage: `url(${getImg})`,
          }}
        >
          <div className={classes.banner__contents}>
            <h1 className={classes.banner__title}>
              {props.slides[selectedIndex].title}
            </h1>
            <div className={classes["ty-seqHomeSlider-nav"]}>
              <button
                onClick={previous}
                type="button"
                class={classes["seq-prev"]}
              >
                <i
                  className="fa fa-angle-left"
                  style={{ color: "white" }}
                  aria-hidden="true"
                ></i>
              </button>
              <button onClick={next} type="button" class={classes["seq-next"]}>
                <i
                  className="fa fa-angle-right"
                  style={{ color: "white" }}
                  aria-hidden="true"
                ></i>
              </button>
            </div>
            <h1 className={classes.banner__description}>
              {props.slides[selectedIndex].overview}
            </h1>
          </div>
          <div className={classes.banner_fadeBottom}></div>
        </li>
      </section>
    );
  });

  return (
    <div>
      <ul>{sliderList}</ul>
    </div>
  );
};

export default SlideShowTop;

Answer 1

您的问题没有包含足够的信息来解决您的问题，但是我看到您使用的是注入 react-jss 的 CSS 动画，并且每次只有一张幻灯片。

我认为您的问题与 CSS 动画有关，所以答案可能在此链接上--> JavaScript CSS animation only works once。

Answer 2

您能否提供代码沙箱的重现会很容易。 如果我现在查看这段代码，它只会返回一张幻灯片。因此，sliderList 仅使用一张幻灯片创建。

const filteredSlide = props.slides.filter((data) => {
    return data.index === selectedIndex;
});