是否可以使用 CSS 一键出现然后消失边框？答案

【问题标题】：Can I use CSS to appear and then disappear the border after one click?是否可以使用 CSS 一键出现然后消失边框？
【发布时间】：2019-02-26 10:54:21
【问题描述】：

感谢阅读。我正在尝试检查一个函数是否为真。如果为false，我想将边框颜色更改为红色，出现和消失，并在2秒内出现和消失。我只是尝试了css动画来实现它，但它只出现一次。 https://codesandbox.io/s/38qvr0j3lp

我想知道是否有办法使用 CSS 来实现它。任何帮助将不胜感激。

【问题讨论】：

在下面回答。尝试将动画时间整体减少到 600 毫秒，每次转换为 150 毫秒。

标签： css reactjs animation

【解决方案1】：

这是一个小演示 - 单击时，我将 animation（通过 keyframes 而不是 transition）添加到按钮元素。

关键帧动画以红色边框开始，中间有透明边框。通过将它与steps(1) 结合使用，动画被视为由两帧组成（0% 和50%），交替透明和红色。我运行此动画两次（即2），每次超过 1 秒（即1s）。

在 JS 中，请注意我将删除 blink 类并在 10 毫秒后读取它，以防它已经存在。如果不删除和读取属性，则无法重新触发 CSS 关键帧动画。

function blink(el) {
  el.classList.remove("blink")

  setTimeout(function() {
    el.classList.add("blink")
  }, 10);
}

button {
  border: 1px solid transparent;
  outline: none;
}

.blink {
  animation: border-blink 1s steps(1) 2;
}

@keyframes border-blink {
  0% {
    border-color: red;
  }

  50% {
    border-color: transparent;
  }
}

&lt;button onclick="blink(this)"&gt;Click Me&lt;/button&gt;

【讨论】：

【解决方案2】：

使用完全 React 方法修复了代码沙箱中的代码。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false
    };
  }

  showErrorSignal() {
    this.setState({ error: true });
    setTimeout(() => this.setState({ error: false }), 500);
    setTimeout(() => this.setState({ error: true }), 1000);
    setTimeout(() => this.setState({ error: false }), 1500);
  }
  render() {
    const styles = {
      error: {
        borderWidth: 5,
        borderColor: "red"
      }
    };
    return (
      <div className="App" style={this.state.error ? styles.error : undefined}>
        <h1>Hello CodeSandbox</h1>
        <button onClick={() => this.showErrorSignal()}>
          show error signal
        </button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.App {
  font-family: sans-serif;
  text-align: center;
  border: 3px solid #d5edeb;
  transition-property: border-color, border-width;
  transition-duration: 500ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

【讨论】：