在无限循环中动态添加和删除类名

Posted 2023-03-16

【中文标题】在无限循环中动态添加和删除类名

【英文标题】：Adding and removing className dynamically in an inifinite loop

【发布时间】：2020-11-26 17:11:52

【问题描述】：

我构建了一个显示 3 张幻灯片的轮播。中间的显示宽度为 100%，而左侧和右侧的显示宽度仅为 10%。

访问网站后，轮播开始自动移动：

    componentDidMount() 
        this.carouselTimer = setInterval(() => 
            this.handleButtonNext();
        , 5000);
     

如果我手动更改幻灯片，我会再次使用 clearInterval 和 setInterval 重置自动更改幻灯片的间隔。

为了能够添加滑动动画，我想将状态属性（leftSlide 和 rightSlide）从 false 更改为 true，并在动画后更改回 false。

我尝试在 handleButtonNext() 方法中将属性从 false 更改为 true，在此处进行更改：

        <Slide 
                className=` $this.state.leftSlide ? ' left-slide' : '' $this.state.rightSlide ? 'right-slide' : ''`
        ...the rest of slides.../>

到目前为止，我遇到的困境和问题是我无法以不会破坏自动播放功能的方式删除添加的类。

我尝试使用重置方法并重新启动自动播放，但似乎没有任何解决方案有效。

如果不删除添加的类，自动播放（并在手动更改幻灯片的情况下重置）工作正常，但这还不够。

这是处理下一个按钮的方法：

    handleButtonNext() 
        this.setState(
            rightSlide: true
        );
        // this.wait1ms = setInterval(() => 
        // , 1100); (useless attempt)
        this.setState(
            activeSlide: this.nextSlide()
        )
    

    nextSlide() 
        let nextIndex = this.state.activeSlide+1;
        return (nextIndex>this.state.slides.length-1) ? 0 : nextIndex ;
    

*The method is used here:*
    <a className="button-container right">
        <div className="carousel-button next" onClick=this.handleButtonNext></div>
    </a>
#same for the left button

我需要提一下，我并不精通 React，而且我对它还很陌生。感谢您花时间帮助我！祝你有美好的一天。

L.E：我忘了说我想使用 class 组件，而不是函数提供的钩子。

【问题讨论】：

# 尽量缩短

this.handleButtonNext 的代码在哪里？

您是在使用滑块库，还是在创建自己的库？它是否已经具有自动播放功能，所以您想为其添加动画？如果它没有动画，自动播放是如何工作的？它只是改变没有动画的图像？

@yaya 我从头开始创建它，与自动播放功能相同，使用 setInterval 并调用每 5 秒将幻灯片更改为下一张的方法。是的，它改变了整个幻灯片（文本、图像等），没有任何动画，即时而可怕。

顺便说一句，您在问题中输入了handleButtonPrev 而不是handleButtonNext，但我假设它们是相似的。

【参考方案1】：

问题是我无法以不会破坏自动播放功能的方式删除添加的类。

    setNextSlideStates()
        this.setState(
            // remove rightSlide state
            rightSlide: false,
            // update the active slide state
            activeSlide: this.nextSlide()
        );
    
    // for usert button click handler, set withAnimation to false.
    handleButtonNext(withAnimation) 
        if(this.carouselTimer) clearTimeout(this.carouselTimer)
        // if there are any animations, terminate them and call setNextSlideStates manually
        if(this.animationTimer) clearTimeout(this.animationTimer); this.setNextSlideStates(); 
        // start the animation
        this.setState(
            rightSlide: true
        );
        // wait 1.1 sec for animation to end
        this.animationTimer = setTimeout(() => 
            this.setNextSlideStates()
            this.animationTimer = null;
            // autoplay the next slide
            this.carouselTimer = setTimeout(() => 
                this.handleButtonNext(true);
            , 3900);
        , withAnimation ? 1100 : 0)
    

还将您的 componentDidMount 更改为：

    componentDidMount() 
        this.carouselTimer = setTimeout(() => 
            this.handleButtonNext(true);
        , 3900);
     

按钮处理程序：

/* no animation */
<button onClick=() => this.handleButtonNext(false)>next</button>

【讨论】：

虽然这可能有效，但请务必记住，此处配置了任意等待时间。所以它需要等于或大于动画时间，更不用说如果你决定更新 CSS 动画时间需要手动更新等待值。这就是我建议使用animationend 事件的原因。

@pustiul500 更新了代码。现在它等待 3.9 秒，然后开始动画，然后在 1.1 之后动画将停止，并在 3.9 秒后再次触发。

@GhassenLouhaichi 当然，但是这个问题似乎更多的是关于反应状态管理，所以我并不关心实际的动画内容。

@pustiul500 等等，我确实写了setInterval 而不是setTimeout，我的错。 （如你所说：the prev code was starting an infinite loop that changes the slides every 1 second）。更新了答案。

@pustiul500 是的，有语法错误，已编辑。我还更新了代码以停止回调。如果动画还没有完成，它会手动调用nextSlide。所以它应该可以解决你的新问题。