如何在React中的状态变化上对span元素进行动画处理？

Question

我正在React中创建一个个人网站，并且其span元素每3秒更改一次。 该部分工作正常，但是当数据更改时，我无法使用id colorText为span元素设置动画。 我究竟做错了什么？

import React, { Component } from 'react';
import './Typewriter.css';

export default class Typewriter extends Component {
    static defaultProps = {
        words: ["Developer", "Creator", "Coder"]
    }
    constructor(props) {
        super(props);
        this.state = {
            step: 0,
            transition: false
        }
    }


    setWord() {
        setTimeout(() => {
            if(this.state.step !== 2) {
                this.setState(curState => ({
                    step: curState.step + 1,
                    transition: !curState.transition
                }));

            } else {
                this.setState(curState => ({
                    step: 0,
                    transition: !curState.transiton
                }));
            }
        }, 3000);

        return this.props.words[this.state.step];
    }
    render() {
        let chosenWord = this.props.words[this.state.step];
        return (
            <div className="center">
                <p className="Typewriter-text">Billy Thorton the <span id="colorText" className={this.state.transition ? "fadeInLeftBig" : "flipper"}>{this.setWord()}</span></p>
            </div>
        )
    }
}

这是我的CSS：

@keyframes fadeInLeftBig {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);
    }

    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  .fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
    animation-duration: 1s;
  }

Answer 1

translate3d仅适用于block元素。

您需要应用display: inline-block到您的span ，

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
  animation-duration: 1s;
  display: inline-block;  //make span inline-block
}

演示