创建反应闪烁颜色组件

Question

任何人都可以告诉我如何使颜色闪烁（绿色/红色）组件像这个网站那样https://www.exchangecompare.com/。

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

Answer 1

由于它是一个非常简单的动画，我宁愿使用简单的 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