Сделать текст белым при изменении значения в реагировать? Реагировать-весна? - PullRequest
Новая
       42

Сделать текст белым при изменении значения в реагировать? Реагировать-весна?

0 голосов
/ 23 января 2020

У меня есть div с количеством игроков, смертей и ассистов: 

    <div className="liveMatchPlayerScore">
      {data.kill_count}/{data.death_count}/{data.assists_count}
    </div>

Каждый раз, когда меняется число убийств или смертей, я бы хотел, чтобы текст стал жирным белым на 3 секунды.

Я думал использовать для этого реагирующую пружину, в частности использовать переходы, но в документации приведены примеры использования массива элементов. Я собираюсь поместить каждую из партитур в массив, но это кажется контрпродуктивным.

Ранее я пытался обернуть партитуры в компонент «Spring» из Reaction-Spring, но это только оживляло партитуры на их начальном рендере - не при обновлении.

Как сделать так, чтобы kill_count и death_count стали белыми в течение 3 секунд после изменения значения?

Спасибо

Я использовал @PeterAmbruzs Решение, но я, кажется, получаю странные цифры. Например, на изображениях ниже, сначала оценка была 0/0/0, а первая цифра увеличилась на 1. Вместо 1/0/0 она стала 01/0/0. Я также получаю абсурдно высокие цифры по какой-то причине. Кто-нибудь знает, почему это может происходить?

Before What it should be

Ответы [ 2 ]

1 голос
/ 24 января 2020

У меня тоже есть решение. Я думаю, что это довольно просто. Сначала вы создаете компонент для анимированных номеров. Я обернул его в Reaction.memo, чтобы обновить его только при изменении его свойства. Вы можете видеть, что он жирный и красный при запуске, но после 3se c он стал нормальным и черным. Но вы можете изменить стиль, как хотите. Я добавил свойство skip для предотвращения анимации, например, для первого рендера. 

const FadeNumber = React.memo(({ value, skip }) => {
  const style = useSpring({
    from: { color: "red", fontWeight: "bold" },
    to: { color: "black", fontWeight: "normal" },
    delay: 3000
  });

  return (
    <animated.span style={{ margin: "10px", ...(skip ? {} : style) }}>
      {value}
    </animated.span>
  );
});

Теперь есть хитрость для повторной визуализации анимации при изменении свойства. Симли положить значение ключа. При изменении ключа будет создан новый компонент, поэтому анимация будет воспроизведена снова. Я добавил уникальный префикс для предотвращения побочных эффектов. 

<FadeNumber skip={kill === 0} key={"a" + kill} value={kill} />

И весь пример:

https://codesandbox.io/s/react-spring-change-fade-out-j8ebk

0 голосов
/ 23 января 2020

https://stackblitz.com/edit/react-5sztov?file=index.js

setTimeout () по-прежнему является жизнеспособной конструкцией - даже при работе в React. 

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      assistsCount: 0,
      color: 'black',
      deathCount: 0,
      fontWeight: 'normal',
      killCount: 0,
      setStyleToReset: false,
    };
  }

  increaseKillCount () {
    this.setState((prevState, props) => {
      return {
        killCount: prevState.killCount + 1,
        color: 'white',
        fontWeight: 'bold',
        setStyleToReset: true,
      };
    });
  }

  render() {
    if (this.state.setStyleToReset) {
      this.resetStyle();
    }
    return (
      <div>
        <div style={{
          backgroundColor:'green',
        }}>
          <span style={{color:this.state.color, fontWeight:this.state.fontWeight}}>{this.state.killCount}</span>/{this.state.deathCount}/{this.state.assistsCount}
        </div>
        <button onClick={() => this.increaseKillCount()}>Increase Kill Count</button>
      </div>
    );
  }

  resetStyle() {
    setTimeout(() => {
      this.setState({
        color: 'black',
        fontWeight: 'normal',
      });
    }, 3000);
  }
}

render(<App />, document.getElementById('root'));
...