如何解决由状态间隔更改的包含状态的转换（反应）

Question

I have a procedure for a timer for animation. I want to make an animation of logos like https://stripe.com/us/customers . But I have an endless loading of the page, so it doesn't work.

I tried to use a procedure in different parts of the code and tried to change interval for better optimization (I think my PC can't work with 1 ms interval), but it didn't help me.

It all from one file. State:

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      submitError: false,
      width: 0,
      height: 0,
      timer: 0
    };

Procedure:

 TimeForLogos() {
   const time = setInterval(() => {
   const passedTime = this.state.timer + 0.1;

   if (passedTime === 20) {
     clearInterval(time);
   }
   this.setState({
     timer: passedTime,
   });
  }, 100);
 }

I try to use it in render (I need that procedure begins when the site is opened) and try to make a button (I thought it help me to solve the problem of endless loading). So part of code from render for now:

<div className={s.logos}>
  <span onClick={this.TimeForLogos()}>go</span>
      {LogoData.map(logo => (
        <div
          className={s.logo}
          style={{
            right: `${logo.positionX}px`,
            top: `${logo.positionY}px`,
            width: logo.width * 1.1,
            padding: `${(logo.width - logo.height) / 2} 0`,
            transform: `translate(${this.state.timer * 10}px,0) scale(1)`,
          }}
        >
          <img
            src={logo.img}
            alt=""
            style={{
              width: logo.width,
              height: logo.height,
            }}
          />
        </div>
     ))}
</div>

So, a question. How can I update my code that it works? And I need to make so that procedure works when the site is opening (animation must play when the site is opened). How I can do it?

Answer 1

You can create a separate component and handle the transition of each component in the timeout function.

class Home extends Component {
  constructor(props) {
    super(props);
    this.logoData = [{
      width: 100,
      height: 100,
      text: "text1"
    }, 
    {
      width: 100,
      height: 100,
      text: "text2"
    }, 
    {   width: 100,
        height: 100,
        text: "text3"
    }];

  }


  render() {
    return (
       <div className="mainContainer">
       {this.logoData.map(item => <MovingDiv {...item}/>)}
       </div>
    );
  }
}

Creating one more react-component say MovingDiv .

class MovingDiv extends Component {

    constructor(props) {
        super(props);
        this.state = {
            translateX: 0,
            translateY: 0,
            scale: 0
        }
    }

    componentDidMount() {
        const intervalLimit = setInterval(() => {
            let { translateX, translateY} = this.state;
            // logic of setting translateX goes here
            if(--translateX < -300) { // -300 is just for example
                translateX = 0;
            }
            this.setState({
                translateX
            })
        }, 200)
    }
    /* will move the divs towards right every 200ms*/
    render() {
        return(<div style={{ width: this.props.width, height: this.props.height, transform: `translate(${this.state.translateX}px, 0px)`}}>{this.props.text}</div>);
    }
}

Hope this helps!

Answer 2

I updated something in code of previous commentator. I make everything in one class (Home). I make json file for logos and info contains in this file. So it's my code.

class Home extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  translateX: 0,
 };}

 render() {
setInterval(() => {
  let { translateX } = this.state;
  translateX -= 2;
  if (translateX < -1800) {
    translateX = 0;
  }
  this.setState({
    translateX,
  });
}, 1000);

        <div className={s.logos}>
      {LogoData.map(logo => (
        <div
          className={s.logo}
          style={{
            left: `${logo.positionX}px`,
            top: `${logo.positionY}px`,
            width: logo.width * 1.1,
            padding: `${(logo.width - logo.height) / 2} 0`,
            transform: `translate(${this.state.translateX}px,0) scale(1)`,
          }}
        >
          <img
            src={logo.img}
            alt=""
            style={{
              width: logo.width,
              height: logo.height,
            }}
          />
        </div>
      ))}
    </div>