CODEWITHSUNDEEP
javascriptcssreactjscss-transitions
dingdingding
dingdingding

Reputation: 1581

How do I transition animation before React rerenders?

I have a custom checkbox like so: https://codesandbox.io/s/throbbing-resonance-09dii

Based on this 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);
}

My 'checking' animation works fine, but I would like to also animate unchecking. I believe react is rerendering my input before my css transition can occur. How can I add an animation to uncheck too?

Upvotes: 1

Views: 57

Answers (1)

dominik.wendland
dominik.wendland

Reputation: 106

Your 'unchecking' animation works fine as well, the problem is that your background-color goes back to white immediately so your white check mark will be invisible.

I would probably add a transition period to the background or change the color of the check mark to blue on its way out. Maybe like this: https://codesandbox.io/s/x5mbi

Upvotes: 2

Related Questions