Search code examples
cssreactjscss-animationsreact-transition-group

react transition group jumping slides

between 2-nd and 3-d "page" jumping content i dont get what is the reason, cuz i've displayed it as an absolute Here is sandbox. https://codesandbox.io/s/nostalgic-bhabha-d1dloy?file=/src/index.js

Solution

  • Between the 2nd and 3rd page, the containing elements have class names of page-left and thus do not have position: absolute applied. You may have meant to apply position: absolute in your CSS:

    .page-left,
.page-right {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

    Instead of

    .page-right,
.page-right {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}