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%;
    }