Могу ли я использовать CSS, чтобы появиться, а затем исчезнуть после одного клика?

Question

Спасибо за чтение.Я пытаюсь проверить функцию, является ли истина ложью.Если false, я хотел бы изменить цвет границы на красный, появляться и исчезать, появляться и исчезать через 2 секунды.Я просто попробовал анимацию CSS, чтобы добиться этого, но она появляется только один раз.https://codesandbox.io/s/38qvr0j3lp

Интересно, есть ли способ использовать CSS для этого?Любая помощь будет оценена.

Answer 1

Исправлен код в вашей песочнице кода с полностью 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" />

Answer 2

Вот небольшая демонстрация - при нажатии я добавляю 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;
  }
}

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