New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React router transitions #792
base: master
Are you sure you want to change the base?
Conversation
6d8f2c6
to
1c8be90
Compare
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? |
@robgietema I saw it while developing, but not in the last version I committed. |
…o react-router-transitions
@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? |
…o react-router-transitions
FYI: There are also two accessibility violations on the front page that are not in master. |
Seems this has something to do with Server Side Rendering. This error pops up in the console:
|
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.
* master: (116 commits) Remove "documentDescription" class in table block (#1015) Added CTRL+ENTER feature in text blocks by default. It creates a newline inside the same text chunk (`<p>`) (#1044) Revert "Fix make build on py3." Add plone.rest(api) to sources. Fix make build on py3. Fix lint check on bash condition (#1031) Further upgrade documentation Back to development Release 4.0.0-alpha.17 Add docs for upgrade to alpha 17 Reverteslintupgrade (#1028) Back to development Release 4.0.0-alpha.16 Lodash improvements for decrease bundle size (#975) Fix small CSS issues in Blocks (#1023) Forked `react-helmet` since it seems unmaintained. Now it's a Named import in helpers (#1025) Solvepeerdependencies (#1026) Fix to a good know digest (#1022) Back to development Release 4.0.0-alpha.15 ...
Fixed the sync between client and server, and the CSS associated with the main container.
@tisto @robgietema this one is ready, maybe we have to check if the animation is the right one that we want. |
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;
}
} |
@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. |
@tisto @sneridagh |
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.