javascript - 实现无限文本旋转器，从下到上旋转文本动画

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

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

const spinnerTexts = document.querySelectorAll('[class^="spinner__text--"]')
const texts = spinnerTexts[0].dataset.texts.split(',')
const textPositions = [0, 1]

function initializeSpinnerTexts() {
  spinnerTexts.forEach((spinnerText, index) => {
    // Initialize the spinner texts' text
    spinnerText.innerText = texts[textPositions[index]]
    
    // Change text after every animation iteration
    spinnerText.addEventListener('animationiteration', e => {
      e.target.innerText = texts[++textPositions[index] % texts.length]
    })
  })
}

window.onload = initializeSpinnerTexts

* {
  margin: 0;
  padding: 0;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.spinner__text {
  position: relative;
  display: inline-block;
/*  width has to be set to be >= largest spinning text width  */
  width: 50px;
}

.spinner__text--top,
.spinner__text--bottom {
  display: inline-block;
  animation: 1s ease 1.05s infinite running none;
}

.spinner__text--top {
  animation-name: spinTop;
}

/* Bottom text spinner has to be configured so that it is positioned
right at the same position as the top one */
.spinner__text--bottom {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation-name: spinBottom;
}

@keyframes spinTop {
  from { transform: translateY(0%); }
  to { transform: translateY(-100%); }
}

@keyframes spinBottom {
  from {
    opacity: 1;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

<div class="spinner">
  This is a 
  <!-- Uses two spans to create an illusion of infinite spinning -->
  <div class="spinner__text">
    <span class="spinner__text--top" data-texts="test., bug., fail."></span>
    <span class="spinner__text--bottom" data-texts="text., bug., fail."></span> 
  </div>
</div>

---

更新

您不能直接使用关键帧 在每个动画迭代之间添加延迟。但是，您可以调整 keyframes 的值和 animation-duration 的值，这样看起来每次迭代之间都有延迟；实际上，您这样做是为了在每个动画结束时什么都没有发生。下面是一个示例(它与上面的示例类似，但对 animation-duration 和 keyframes 进行了轻微调整。

const spinnerTexts = document.querySelectorAll('[class^="spinner__text--"]')
const texts = spinnerTexts[0].dataset.texts.split(',')
const textPositions = [0, 1]

function initializeSpinnerTexts() {
  spinnerTexts.forEach((spinnerText, index) => {
    // Initialize the spinner texts' text
    spinnerText.innerText = texts[textPositions[index]]
    
    // Change text after every animation iteration
    spinnerText.addEventListener('animationiteration', e => {
      e.target.innerText = texts[++textPositions[index] % texts.length]
    })
  })
}

window.onload = initializeSpinnerTexts

* {
  margin: 0;
  padding: 0;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.spinner__text {
  position: relative;
  display: inline-block;
  width: 50px;
}

.spinner__text--top,
.spinner__text--bottom {
  display: inline-block;
  /* Changed animation duration */
  animation: 5s ease 2s infinite running none;
}

.spinner__text--top {
  animation-name: spinTop;
}

.spinner__text--bottom {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation-name: spinBottom;
}

@keyframes spinTop {
  0% { transform: translateY(0%); }
  /* Spin finishes after 20% of animation duration (1s) */
  20% { transform: translateY(-100%); }
  /* Nothing from 20% until 100% of animation duration (4s) */
  /* This makes it looks like there's a delay between each animation */
  100% { transform: translateY(-100%); }
}

@keyframes spinBottom {
  /* Similar to spinTop's logic */
  0% {
    opacity: 1;
    transform: translateY(100%);
  }
  20% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% { 
    opacity: 1;
    transform: translateY(0%); 
  }
}

<div class="spinner">
  This is a 
  <!-- Uses two spans to create an illusion of infinite spinning -->
  <div class="spinner__text">
    <span class="spinner__text--top" data-texts="test., bug., fail."></span>
    <span class="spinner__text--bottom" data-texts="text., bug., fail."></span> 
  </div>
</div>