Question

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

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

Answer 1

这里有个小样-单击时，我在按钮元素中添加了animation（通过keyframes而不是transition）。

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

在JS中，请注意，我要删除blink类，并在10ms之后读取它，以防它已经存在。如果不删除并读取该属性，则无法重新触发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;
  }
}

<button onclick="blink(this)">Click Me</button>

Answer 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" />

我可以使用CSS一键显示然后消失边框吗？

2 个答案: