Создать реактивную вспышку цветовой составляющей

Question

Может кто-нибудь показать мне, как заставить компонент мигать цветом (зеленый / красный), как этот сайт https://www.exchangecompare.com/.

Любое предложенное решение будет высоко ценится?

Answer 1

Мне было интересно, как определить предыдущее значение после изменения компонента, и я в итоге использовал componentDidUpdate для доступа к предыдущему значению перед рендерингом, я использую Typescript:

import * as React from 'react';
import './ChangeColor.css';

interface IChangeColorProps {
  value: number;
}

interface IChangeColorState {
  stateClass: string;
}

export class ChangeColor extends React.Component<IChangeColorProps, IChangeColorState> {
  private timeout: NodeJS.Timeout;

  public componentDidUpdate(prevProps: IChangeColorProps) {
    if (prevProps.value < this.props.value) {
      this.setState({ stateClass: ' highlight-up' });
    } else if (prevProps.value > this.props.value) {
      this.setState({ stateClass: ' highlight-down' });
    } else {
      return;
    }

    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      this.setState({ stateClass: '' });
    }, 1200);
  }

  public render(): JSX.Element {
    const stateClass = this.state ? this.state.stateClass : '';

    return <span className={`element${stateClass}`}>
      {this.props.value}
    </span>;
  }
}

Использование

<ChangeColor value={myVal} />

Answer 2

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

Представьте, у вас есть триггер "выделение цветом".Если компонент получает выделение триггера, он должен мигать.Что вы можете сделать, это просто добавить это как «выделение» класса к этому элементу, если он должен мигать (в зависимости от триггера).Как только класс добавлен, вы делаете анимационный переход от основного цвета к цвету выделения.Затем, через 2 с (или около того), вы снова удаляете класс, и компонент должен постепенно исчезнуть до основного цвета.

Пока все хорошо.

CSS для этого будет выглядеть примерно так:

.element {
  -moz-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  color: black;
  padding: 20px;
}

.highlight {
  color: #ff0000;
}

(. Element - базовый элемент, который поддерживает логику перехода, .highlight только что включил все, что должно измениться)

Некоторая базовая реакция:

const BlinkingComponent = ({ highlighting }) => (
  <div className={`element${highlighting ? " highlight" : ""}`}>Watch Me</div>
);

class App extends React.Component {
  state = {
    highlight: false
  };

  handleClick = () => {
    this.setState({ highlight: true });
    setTimeout(() => {
      this.setState({ highlight: false });
    }, 2000);
  };

  render() {
    const { highlight } = this.state;
    return (
      <div className="App">
        <button onClick={() => this.handleClick()}>Click me</button>
        <BlinkingComponent highlighting={highlight} />
      </div>
    );
  }
}

Смотри, как работает: https://codesandbox.io/s/61502wxlw3