Javascript 实现无限文本微调器，从下到上旋转文本动画

我试图实现一个从底部到顶部的无限旋转轮。到目前为止，我得到了以下信息：

工作原理：

它从下到上旋转

到达末尾后，它再次从第一个字符串开始

我想要什么/什么不正确：
我希望动画是无限的，换句话说，应该没有过渡。当动画到达其最后一个元素时，它不能跳回其第一个元素，而是平滑地将其附着到其底部，以创建一个从下到上的持续动画

我如何实施这种行为？为了达到给定的效果，我使用了js-我需要更多的js还是回到普通的css动画

class Spinner extends Component {

    state = {
      active: 0
    };

    interval;

    componentDidMount() {
        this.interval = setInterval(() => {
            this.setState({active: this.state.active === this.props.content.length - 1 ? 0 : this.state.active + 1});
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    setPosition = () => {
        const n = 100 / this.props.content.length;
        return n * this.state.active * -1;
    };

    render() {
        const style = {
            transform: 'translateY(' + this.setPosition() + '%)'
        };

        return (
            <div className="spinner--list d-inline-block align-self-start">
                <ul className="p-0 m-0" style={style}>
                    {
                        this.props.content.map((item, index) => {
                            return (
                                <li key={index}>
                                    <h1>{item}</h1>
                                </li>
                            );
                        })
                    }
                </ul>
            </div>
        );
    }

}

---

CSS解决方案由

@关键帧

body{
颜色：黑色；
填充：0；
保证金：0；
}
.文本{
填充：20px0；
显示器：flex；
位置：相对位置；
}
.项目-1，
.项目-2，
.项目-3{
位置：绝对位置；
填充：20px0；
保证金：0；
左边距：5px；
动画持续时间：4s；
动画计时功能：轻松进出；
动画迭代次数：无限；
}
.项目-1{
动画名称：anim-1；
}
.项目-2{
动画名称：动漫-2；
}
.项目-3{
动画名称：动漫-3；
}
@关键帧anim-1{
0%，8.3%{顶部：-50%；不透明度：0；}
8.3%，25%{顶部：0%；不透明度：1；}
33.33%，100%{顶部：50%；不透明度：0；}
}
@关键帧anim-2{
0%，33.33%{顶部：-50%；不透明度：0；}
41.63%，58.29%{顶部：0%；不透明度：1；}
66.66%，100%{顶部：50%；不透明度：0；}
}
@关键帧anim-3{
0%，66.66%{顶部：-50%；不透明度：0；}
74.96%，91.62%{顶部：0%；不透明度：1；}
100%{顶部：50%；不透明度：0；}
}

这是一个
试验

缺陷

失败

这是一个不带ul的解决方案，可以自动调整要旋转的可变文本数。该解决方案使用

关键帧

和CSS中的一个小技巧/错觉，仅在两个

span

-s上创建无限旋转动画。每次之后，使用JS更改每个跨度的文本。更改的文本取决于HTML中的

数据文本

属性。在ReactJS代码中，您可以简单地在这些

数据文本

属性中输入所有想要旋转的文本

const spinnerTexts=document.queryselectoral（'[class^=“spinner\uuuu text--']））
常量文本=喷丝头文本[0]。数据集。文本。拆分（“，”）
常量textPositions=[0，1]
函数初始值espinnertexts（）{
喷丝头文本。forEach（（喷丝头文本，索引）=>{
//初始化微调器文本的文本
spinnerText.innerText=文本[textPositions[索引]]
//每次动画迭代后更改文本
spinnerText.addEventListener（'animationiteration'，e=>{
e、 target.innerText=文本[++textPositions[索引]%texts.length]
})
})
}
window.onload=初始化InnerText

*{
保证金：0；
填充：0；
}
斯宾纳先生{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
溢出：隐藏；
}
.spinner\u文本{
位置：相对位置；
显示：内联块；
/*宽度必须设置为>=最大旋转文本宽度*/
宽度：50px；
}
.spinner\uuu文本--顶部，
.spinner\uuu文本--底部{
显示：内联块；
动画：1s轻松1.05s无限运行无；
}
.spinner\uuu文本--顶部{
动画名称：spinTop；
}
/*必须对底部文本微调器进行配置，以便将其定位
正处于与顶部相同的位置*/
.spinner\uuu文本--底部{
位置：绝对位置；
排名：0；
左：0；
不透明度：0；
动画名称：spinBottom；
}
@关键帧旋转顶{
来自{transform:translateY（0%）；}
到{transform:translateY（-100%）；}
}
@关键帧旋转底部{
从{
不透明度：1；
转化：translateY（100%）；
}
到{
不透明度：1；
转化：translateY（0%）；
}
}

这是一个

什么是

。微调器--容器

？在你的JS代码中没有。谢谢！不过，还有一件事对我有用。当上一个文本正在制作动画时，如何实现已经显示下一个文本的过渡？希望这可以理解。谢谢！如何使文本等待更长时间？所以它说f.e.测试-等待5秒，然后转换到下一个文本，等等on@Tim您可以简单地调整动画时间和关键帧动画值，使其看起来像是在等待。我还没有能够尝试您的新解决方案-我将在明天尝试！

.spinner--list {
    max-height: calc((10px + 2vw) * 1.5);
    overflow: hidden;
}

.spinner--list ul {
    list-style-type: none;
    transition: transform 1s;
    will-change: transform;
}

.spinner--container h1 {
    font-size: calc(10px + 2vw);
    line-height: 1.5;
    margin: 0;
}