实现无限文本微调器，从底部到顶部动画旋转文本

Question

我正在尝试实现从下到上的无限旋转纺车。到目前为止，我得到了以下内容：

正在做什么：

1. 从下到上旋转
2. 到达结尾后再次从第一个字符串开始

我想要/不正确的地方：我希望动画是无限的，换句话说，应该没有过渡。当动画到达其最后一个元素时，它不得跳回到其第一个元素，而应将其平滑地附加到其底部以创建从底部到顶部进行动画。

我如何实现这种行为？为了达到给定的效果，我使用了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>
        );
    }

}

.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;
}

Answer 1

@keyframes的CSS解决方案>

body { 
  color: black;
  padding: 0;
  margin: 0;
}

.text {
  padding: 20px 0;
  display: flex;
  position: relative;
}

.item-1, 
.item-2, 
.item-3 {
  position: absolute;
  padding: 20px 0;
  margin: 0;
  margin-left: 5px;

  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.item-1{
  animation-name: anim-1;
}

.item-2{
  animation-name: anim-2;
}

.item-3{
  animation-name: anim-3;
}

@keyframes anim-1 {
  0%, 8.3% { top: -50%; opacity: 0; }
  8.3%,25% { top: 0%; opacity: 1; }
  33.33%, 100% { top: 50%; opacity: 0; }
}

@keyframes anim-2 {
  0%, 33.33% { top: -50%; opacity: 0; }
  41.63%, 58.29% { top: 0%; opacity: 1; }
  66.66%, 100% { top: 50%; opacity: 0; }
}

@keyframes anim-3 {
  0%, 66.66% { top: -50%; opacity: 0; }
  74.96%, 91.62% { top: 0%; opacity: 1; }
  100% { top: 50%; opacity: 0; }
}
<div class="text">This is a 
  <div class="items">
    <p class="item-1">test.</p>
    <p class="item-2">bug.</p>
    <p class="item-3">fail.</p>
  </div>
</div>

Answer 2

这里是没有ul且自动调整为要旋转的可变文本数的解决方案。该解决方案使用CSS中的keyframes和一些技巧/错觉在两个span -s上创建无限旋转的动画。在每个animation iteration之后，每个跨度的文本都使用JS进行更改。更改后的文本取决于HTML中的data-texts属性。在您的ReactJS代码中，您可以简单地在这些data-texts属性中输入要旋转的所有文本。