Skip to content
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

Open
wants to merge 15 commits into
base: master
from

Conversation

@nzambello
Copy link
Contributor

commented Jun 22, 2019

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.

@nzambello nzambello requested review from sneridagh, tisto and robgietema Jun 22, 2019
@nzambello nzambello self-assigned this Jun 22, 2019
@nzambello nzambello force-pushed the react-router-transitions branch from 6d8f2c6 to 1c8be90 Jun 22, 2019
@robgietema

This comment has been minimized.

Copy link
Member

commented Jun 23, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Jun 24, 2019

@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. 🤔

@sneridagh sneridagh added this to the 4.0.0 milestone Aug 19, 2019
@tisto tisto added this to In progress in Volto 4 Sep 20, 2019
tisto added 6 commits Sep 22, 2019
…o react-router-transitions
@tisto

This comment has been minimized.

Copy link
Member

commented Sep 22, 2019

@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:

Events

Could you image to have a look?

@tisto

This comment has been minimized.

Copy link
Member

commented Sep 22, 2019

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

@tisto

This comment has been minimized.

Copy link
Member

commented Sep 22, 2019

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>.

Copy link
Member

left a comment

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.

Volto 4 automation moved this from In progress to Review in progress Sep 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Volto 4
  
Review in progress
4 participants
You can’t perform that action at this time.