React-slick:在滑动时添加动画

Question

我已经使用react slick创建了一个滑块，现在需要在上一次和下一次单击按钮时更改幻灯片的过渡和动画。得到了一些帮助，添加类到当前活动的幻灯片，同时更改幻灯片，并添加动画和过渡效果。并在幻灯片完全改变后移除。我试过了，但它不能像预期的那样工作。首先，它不是在下一个或上一个按钮按钮上添加类，第二，它是在滑动幻灯片上添加类，但它干扰了其他旋转木马项目，这是我的代码

  const settings = {
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    autoplay: false,
    autoplaySpeed: 2000,
    infinite: false,
    beforeChange,
    afterChange,
    useCSS: false,
    useTransform : false
  }

  const beforeChange = (prev: number, next: number) => {
    let element = document.querySelector('.slick-active');
    element?.classList.add('next-slide-anim');
    setIndex(next);
  };

  const afterChange = (index : number) => {
    let element = document.querySelector('.slick-active');
    element.classList.remove('next-slide-anim')
  };

  const settings = {
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    autoplay: false,
    autoplaySpeed: 2000,
    infinite: false,
    beforeChange,
    afterChange,
    useCSS: false,
    useTransform : false
  }

  const next = () => {
    sliderRef.current.slickNext()
  };

  const previous = () => {
    sliderRef.current.slickPrev();
  };

 <div className="home-slider">
            <div className="carousel">
              <Slider {...settings} className="carousel-inner" ref={ref => sliderRef.current = ref}>
                {
                  slides.map((slide: any, index) => (
                    <div className="carousel-item" key={index} ref={ref => carouselRef.current = ref}>
                      <div className="slide-content">
                        {index !== slides.length - 1 &&
                          <>
                            <h3>{slide.username}</h3>
                            <span id="user-icon-link">
                              <Link to="/" target="_blank">
                                <img src="/images/homeScreen/instagram.png" alt="link-icon" width="20" height="20" />{slide.userlink}</Link>
                            </span>
                          </>
                        }
                      </div>
                      <img src={slide.path} alt="Chicago" width="1100" height="500" />
                    </div>
                  ))
                }
              </Slider>
              {((slides.length !== 0) && (index !== slides.length - 1)) &&
                <>
                  {(index !== 0) && <a href="#/" className="carousel-control-prev" onClick={previous}>
                    <img src="/images/homeScreen/skipnewbtn.png" alt="Los Angeles" />
                  </a>}
                  {index !== slides.length - 1 && <a href="#/" className="carousel-control-next" id="next-btn" onClick={next}  >
                    <img src="/images/homeScreen/fast-forward-button.gif" alt="Los Angeles" />
                  </a>}
                </>
              }
            </div>
          </div>

Answer 1

您可以使用传递给函数的索引值来获取beforeChange中的幻灯片元素，然后在相应的幻灯片中添加/删除类，而不是使用.slick-active。在看不到CSS的情况下，我猜你想要在beforeChange中添加动画，但如果效果更好，你可以随时将classList.add()移到你的afterChange中。

const beforeChange = (prev: number, next: number) => {
  const prevSlideElement = slider.current.innerSlider.list.querySelector(`[data-index="${prev}"]`);
  const nextSlideElement = slider.current.innerSlider.list.querySelector(`[data-index="${next}"]`);

  prevSlideElement.classList.remove('next-slide-anim');
  nextSlideElement.classList.add('next-slide-anim');
}

Answer 2

Ed的反应很好，但还需要一个技巧！

beforeChange是在react-slick添加他的内部类如"current-slide“之前触发的，所以next-slide-anim被覆盖，动画不会出现……

为了纠正这个问题，我们需要调用一个Timeout函数来在下一次计时触发代码。

const beforeChange = (prev: number, next: number) => {
  const prevSlideElement = slider.current.innerSlider.list.querySelector(`[data-index="${prev}"]`);
  const nextSlideElement = slider.current.innerSlider.list.querySelector(`[data-index="${next}"]`);
  setTimeout(() => {
    prevSlideElement.classList.remove('next-slide-anim');
    nextSlideElement.classList.add('next-slide-anim');
  });
}