CODEWITHSUNDEEP
cssreactjsreact-router
rhigdon
rhigdon

Reputation: 1521

Why does this React/ReactRouter/CSS Transition only work sometimes

I am trying to create a transition between two routes. My CSS Transition does not seem to work every time, only sporadically. I found this post React css transition does not work correctly which talks about the animation being cut off, but I don't really understand if this would apply for me.

Here is a code-pen of the issue. Right now the transition rarely runs. I am trying to get it to run every time you click the link.

https://codepen.io/rhigdon-the-vuer/pen/jOqEdWO

  <div>Code a bit too complex to post here. Let me know if it would be helpful.</div>

My current theory is a re-render canceling out the transition.

Update: I ended up using the animation css property that was suggested in the comments. This seems to work much better. It now will reliably play the animation.

Here is the updated pen: https://codepen.io/rhigdon-the-vuer/pen/mdPJBGv?editors=0110

Upvotes: 0

Views: 196

Answers (1)

Apostolos
Apostolos

Reputation: 10463

I don't know if this helps you but I altered your code in order to work with refs and pure css value setting and it seems to be working without problems.

Check this sandbox

https://codesandbox.io/s/jolly-bush-mhtby

Tricky part

if (divEl && divEl.current.style.width === "100%") {
  setTimeout(function () {
    divEl.current.style.width = "0%";
  }, 5);
}

You need to set a minimum timeout for the browser to understand that a transition needs to happen. I tried "quick"-clicking the links and not one time did the transition not show up.

Upvotes: 1

Related Questions