javascript - 我如何在 React 重新渲染之前转换动画?

标签 javascript css reactjs css-transitions

我有一个像这样的自定义复选框: 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 转换发生之前,React 正在重新渲染我的输入。我怎样才能添加取消选中的动画?

最佳答案

您的“取消选中”动画效果也很好,问题是您的背景颜色立即变回白色,因此您的白色复选标记将不可见。

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

关于javascript - 我如何在 React 重新渲染之前转换动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56676018/

相关文章:

javascript - 在同一范围内两次声明 Javascript 变量 - 这是一个问题吗?

html - 防止 Div 在包装后填充父 Div 宽度

jQuery - 获取 text=mytext 的所有链接

css - 如何在 Material UI-REACT 中显示空日期选择器?

reactjs - SecurityError : localStorage is not available for opaque origins with new testEnvironmentOptions. url 选项

javascript - getDisplayMedia() 在 Android 设备上无法正常工作

javascript - 通过变量动态实例化一个类

javascript - 如果从一个选择和另一个选择中选择选项,则显示 div 元素

javascript - 如何在 Jquery 中使用鼠标事件

html - 字体大小是如何测量的?