使用 CSS 从右向左滑动文本直到文本字符串结束答案

【问题标题】：Using CSS to slide text from right to left until the end the text string使用 CSS 从右向左滑动文本直到文本字符串结束
【发布时间】：2021-12-31 03:31:10
【问题描述】：

我正在尝试创建一个slider 组件，它可以从右向左滑动文本，如果文本的长度大于 div 元素的宽度，则继续移动文本直到到达文本的末尾。

我刚刚滑动的代码，直到文本的开头碰到 div 元素的左端，我试图让它移动，直到字符串的结尾碰到 div 的右侧。滑块组件的两个字符串都比宽度短，在这种情况下，文本应该移动到 div 的左侧，如果它比宽度长，它应该移动字符串的末尾碰到右侧分区。

关于如何移动此文本直到文本末尾到达 div 右侧的任何指针或建议？

代码：

.slider {
    width: 100%;
    overflow: hidden;
    margin-left: 300px;
    background-color: aqua;
  }
  
  .slider h2 {
    animation: slide-left 10s;
  }
  
  @keyframes slide-left {
    from {
      margin-left: 100%;
    }
  
    to {
      margin-left: 0%;
    }
  }

  @keyframes slide-right {
    to {
      transform:translateX(0);
    }
  }

<div className="slider">
<h2>Hello world, I need a very long text to show how the text will move</h2>
</div>

更新

使用计时器，我设法让动画在遇到条件时停止。我感觉动画最后会加速，所以我会进一步尝试。

.slider {
    width: 100%;
    overflow: hidden;
    margin-left: 300px;
    background-color: aqua;
  }
  
  .slider h2 {
      animation: slide-left 30s;
      animation-play-state: paused;
  }
  
  @keyframes slide-left {
    from {
      margin-left: 0%;
    }
  
    to {
        margin-left: -1000%;
    }
  }

  @keyframes slide-right {
    to {
      transform:translateX(0);
    }
  }

    useEffect(() => {
        if(executeTimer){
        let interval = setInterval(() => {
            let sliderElement = document.getElementById('slider');
            let sliderWidth = sliderElement.clientWidth;
            
            setCounter(counter + 1);
            if(counter === 100){
                document.getElementById("slider").style.animationPlayState = "running"; 
            }
            if(sliderWidth >= sliderElement.scrollWidth) {
                setExecuteTimer(false);
                document.getElementById("slider").style.animationPlayState = "paused"; 
            }
            
            },10);
        return () => clearInterval(interval);
        }
    }, [executeTimer, counter]);

return (
        <div className="slider" id="slider-container">
        <h2 id="slider">Hello world, this is just a little bit longer; no it needs to be just a little bit longer</h2>
        </div>
    );

【问题讨论】：

标签： javascript reactjs slider css-animations marquee

【解决方案1】：

我有类似的需求，所以这是我想出的解决方案。

transform: translateX(calc(-100% + 200px));

这对我有用。

唯一的问题是滚动速度取决于文本的长度。它不会打扰我，所以我不会试图“修复”它。

:root {
  --slider-width: 400px;
}

body {
  background-color: gray;
}

.slider {
  width: var(--slider-width);
  height: 40px;
  overflow: hidden;
  background-color: blue;
  white-space: nowrap;
}

.text {
  font-size:26px;
  display: inline-block;
  animation: slide 20s linear infinite;
}

@keyframes slide {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(calc(-100% + var(--slider-width)));
    }
    
    100% {
        transform: translateX(0%);
    }
}

<div class="slider">
      <div class="text">
        Hello world, I need a very long text to show how the text will move
      </div>
    </div>

希望对你有帮助。

【讨论】：

这是一个很好的提示，谢谢！

【解决方案2】：

你可以改变

margin-left: 0%;

到

margin-left: -200%;

或至少是-100% 或以下的其他值。如果文本可能是屏幕宽度的 3 倍，则需要 -300%。

【讨论】：