如何在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
}

演示