javascript - 如何在 React 重新渲染之前过渡动画?
问题描述
我有一个像这样的自定义复选框: https ://codesandbox.io/s/throbbing-resonance-09dii
基于这个codepen: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 转换发生之前重新渲染我的输入。如何添加动画以取消选中?
解决方案
您的“取消选中”动画也可以正常工作,问题是您的背景颜色会立即变回白色,因此您的白色复选标记将不可见。
我可能会在背景中添加一个过渡期,或者在退出时将复选标记的颜色更改为蓝色。也许像这样:https ://codesandbox.io/s/x5mbi