如何在 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 过渡发生之前会重新渲染我的输入。如何添加动画以取消选中？

Answer 1

您的"取消选中"动画也可以正常工作，问题是您的背景颜色会立即恢复为白色，因此您的白色复选标记将不可见。

我可能会在背景中添加一个过渡期，或者在出路时将复选标记的颜色更改为蓝色。也许像这样：https://codesandbox.io/s/x5mbi