我如何在 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);

}

我的“检查”动画效果很好，但我也想取消检查动画。我相信 react 会在我的 css 转换发生之前重新渲染我的输入。如何添加动画以取消选中？