CODEWITHSUNDEEP
javascriptcssreactjscreate-react-app
klaurtar
klaurtar

Reputation: 253

How to animate span element on state change in React?

I am creating a personal website in React and have a span element that changes every 3 seconds. That part is working fine but I am not able to animate the span element with id colorText when the data changes. What am I doing wrong?

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>
        )
    }
}

here is my 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;
  }

Upvotes: 0

Views: 608

Answers (1)

ravibagul91
ravibagul91

Reputation: 20755

translate3d only works with block elements.

You need to apply display: inline-block to your span,

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

Demo

Upvotes: 2

Related Questions