React router transitions

[nzambello]

Fixes #654.

I renamed ScrollToTop to AnimationWrapper because I added functionalities to it.
Now, when it detect a location change, applies some CSS classes. With those CSS classes, we can easily animate on opacity or whatever else and it's easy to change animations unlike with js libraries.

[robgietema]

When I test the branch I see the header is a bit strange, the logo is above the navbar and the searchbar below. Some weird side effects. Any ideas?

[nzambello]

@robgietema I saw it while developing, but not in the last version I committed.
Anyway, the only thing I can think about is the div I have put for handling css classes, but it's not in the header. 🤔

[tisto]

@nzambello the router animations work like a charm. I'd really like to merge this now so we can try it out in our projects and find possible issues. Though, the header is currently somehow broken:

Could you image to have a look?

[tisto]

FYI: There are also two accessibility violations on the front page that are not in master.

[tisto]

Seems this has something to do with Server Side Rendering. This error pops up in the console:

Warning: Expected server HTML to contain a matching <div> in <div>.

[tisto]

The animations itself work like a charm. We have a problem with the hydrate function. It seems the HTML from the SSR differs from the client-side HTML.

[sneridagh]

Fixed the sync between client and server, and the CSS associated with the main container.

[sneridagh]

@tisto @robgietema this one is ready, maybe we have to check if the animation is the right one that we want.

[AlexBueckig]

After talking to Timo Till and I had a look at the opacity values because a value of 0.3 seems to be a bit rough. We played around with the values a little bit and here's what we thought works best for the transition (line 266 - 276 in main.less):

  .content-area {
    position: relative;
    opacity: 0.7;
    transition: opacity 0.1s;
  }

  &.entering {
    .content-area {
      opacity: 0.7;
    }
  }

[nzambello]

@sneridagh how about this? what's missing? I didn't follow the updates so well, but I tested out right now and I see this ready and it works fine.

[nzambello]

@tisto @sneridagh
Plone tests are failing but locally I'm not able to reproduce the error, test work fine and pass.
Furthermore I'm really interested in pushing this to a near release, so let me know what you think about this.