我如何在 React 重新渲染之前转换动画？
How do I transition animation before React rerenders?
我有一个像这样的自定义复选框：
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);
}
我的 'checking' 动画效果很好，但我也想制作取消选中的动画。我相信在我的 css 转换发生之前，React 正在重新渲染我的输入。我怎样才能添加取消选中的动画？
您的 'unchecking' 动画效果也很好，问题是您的 background-color 立即变回白色，因此您的白色复选标记将不可见。
我可能会在背景中添加一个过渡期，或者在退出时将复选标记的颜色更改为蓝色。
可能是这样的：https://codesandbox.io/s/x5mbi
我有一个像这样的自定义复选框： 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);
}
我的 'checking' 动画效果很好，但我也想制作取消选中的动画。我相信在我的 css 转换发生之前，React 正在重新渲染我的输入。我怎样才能添加取消选中的动画？
您的 'unchecking' 动画效果也很好，问题是您的 background-color 立即变回白色，因此您的白色复选标记将不可见。
我可能会在背景中添加一个过渡期，或者在退出时将复选标记的颜色更改为蓝色。 可能是这样的：https://codesandbox.io/s/x5mbi