Page Transition Animations about react-pwa HOT 15 CLOSED

I appreciate the minimalism! The implementation looks simple and extensible. Very nice.

from react-pwa.

@dav-is given this was closed by pr, maybe there's another bug which could be opened to pull against?

from react-pwa.

Definitely @dav-is. Everybody likes a smooth transition, We will make sure we provide optional animation support while changing pages/urls.. You inputs and suggestion are always appreciated.

from react-pwa.

Here's how I do it on Hack Cabin using keyframe animation. I deliberately do not animate the header so global navigation is always visible between page transitions.

from react-pwa.

from react-pwa.

Maybe http://maisano.github.io/react-router-transition/ would work nicely

from react-pwa.

I agree with @jhabdas. It can be very minimal CSS transition/animation and developer can easily customize it. @dav-is The problem with any React Transition/Animation is it creates a copy of the rendered children and then displays it till the transition ends. Which is a very DOM heavy process.
Thus we would not include it directly in bolerplate and leave the decision to the developer.

Instead I am busy finding a simple solution of fade-in-out on route change. thus making it light weight and really simple.

Thanks Guys.

from react-pwa.

I have added a simple module which is configurable with simple CSS. Very light weight. I know we can still improve it and make it more configurable but I think this should solve the transition issue as of now.
Enhancements can be added to other mile-stones.

FYI @jhabdas & @dav-is, I hope you like it.

from react-pwa.

Page doesn't animate in on initial load

from react-pwa.

@jhabdas I shall re-open the bug. :)

from react-pwa.

This might be considered an issue in page transitions and the image component, but the split second before an image is loaded it takes up 0px, then suddenly it loads and shifts all the content. This could be solved by using progressive image loading everywhere, but not everyone will want to do that.

from react-pwa.

@dav-is This issue is regarding Page Transition. I think you replied to wrong issue :)

from react-pwa.

@dav-is I have moved the css from bottom of body to head section. This might cut 2 points from page speed but is more appropriate as animating the content on load was dependent on JS and many crawlers are not JS friendly thus rendering empty sections (waiting for animation)

I personally think rather than adding transitions on page load it should be on page transitions only.
Your views ?

from react-pwa.

Any critical CSS should be in the head regardless. If it’s in the body, you will get a flash of unstyled components. If you want the speed benefit here, I’d recommend CSS-in-JS. Which would put all the critical styles in the head and any styles that wouldn’t be used would be loaded when it’s needed.

As for Transition on load, I think you’re right. It should only be on page change, not the initial load.

from react-pwa.

@dav-is Thanks for your inputs. I shall continue your talk on CSS-inJS in the specified issue :)
PS: I implemented workbox-sw.js with a small trade-off of API cache. But I shall customize it soon. Thanks for the suggestion.

from react-pwa.