自动将单个字符从某个位置移动到另一个位置

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>