Как мне перевести анимацию перед рендерингом React?

Question

У меня есть пользовательский флажок, например: https://codesandbox.io/s/throbbing-resonance-09dii

На основе этого кода: https://codepen.io/Sambego/pen/yiruz

input:checked:before {
  transition: transform 2s cubic-bezier(0.45, 1.8, 0.5, 0.75);
  transform: rotate(-45deg) scale(0, 0);
}

Моя анимация "проверки" работает нормально, но я бы хотелтакже анимация снята.Я полагаю, что реакция - это изменение моего ввода до того, как произойдет мой переход CSS.Как я могу добавить анимацию, чтобы снять флажок?

Answer 1

Ваша анимация «снятия отметки» также работает нормально, проблема в том, что ваш фоновый цвет немедленно возвращается к белому, поэтому ваш белый флажок станет невидимым.

Я бы, вероятно, добавил переходный период к фону или изменил цвет галочки на синий при его выходе. Может быть так: https://codesandbox.io/s/x5mbi