Question

有人可以教我如何像本网站一样https://www.exchangecompare.com/使颜色闪烁（绿色/红色）。

任何解决方案建议将不胜感激？

Answer 1

由于这是一个非常简单的动画，所以我宁愿使用简单的CSS类和过渡效果来实现该目标。

想象一下，您有触发器“突出显示”。如果组件触发突出显示，则应该闪烁。您可以做的就是简单地将其添加为该元素的“突出显示”类（如果该元素应闪烁）（基于触发器）。添加类后，就可以从基色过渡到突出显示颜色。然后，在2s（或大约2s）后，您再次删除该类，并且该组件应淡出回到基色。

到目前为止很好。

该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

Answer 2

我想知道一旦组件更改，如何确定先前的值，最终我使用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} />

创建反应闪烁颜色组件

2 个答案: