Перемещение отдельных символов из определенной позиции в другую позицию автоматически

Question

Какая библиотека в React для создания анимации автоматического перемещения одного символа из строки на новую позицию?

Answer 1

Это реализация без какой-либо библиотеки:

class AnimateChar extends React.Component {
  animateChar = () => {
    const { children, charIndex } = this.props;

    return (
      children.split('').map((char, i) => (
        <span className={i === charIndex ? 'animate' : ''}>
          {char}
        </span>
      ))
    )
  }

  render() {
    return this.animateChar();
  }
}

ReactDOM.render(<AnimateChar charIndex={2}>moveme</AnimateChar>, document.getElementById('root'))

@keyframes move {
  0% {transform: translateY(0)}
  100% {transform: translateY(12px)}
}

.animate {
  display: inline-block;
  animation: move .5s ease-in-out forwards
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>