Is there a way to not have a transition on the very first page load?

[supermoos]

Is it possible to disable the transitioning in on first page load, otherwise the page will be blank until react is loaded and inited. I only want the page transitions on subsequent page navigations.

[DigitalGoldfish]

That would really be awesome, i do have customers complaining that the page now appears slow due to this issue.

[DigitalGoldfish]

Modifiying the defaultStyle property from

var defaultStyle = this.props.defaultStyle || {
   transition: 'opacity ' + this.state.transitionTime + 'ms ease-in-out',
   opacity: 0
};

to

var defaultStyle = this.props.defaultStyle || {
   transition: 'opacity ' + this.state.transitionTime + 'ms ease-in-out',
   opacity: typeof window === 'undefined' ? 1 : 0
};

seems to fix the issue for me

[DigitalGoldfish]

Can someone confirm that this is the right way to do things? I can prepare a PR if so ...

[mongkuen]

Had strep the last week so I've been pretty out of it. I appreciate the code, I'll take a look at this now that I have some time over labor day weekend!

[DigitalGoldfish]

My solution isn't complete ... it ensures that the content is visible when server rendered. However the fade-in animation still happens on the first page load. Content is visible for a short time, then invisible and fades in. Not sure why I thought I had a complete solution ...

[supermoos]

Any updates on this? :-) Or pointers on where to start?

[flavio88]

set transitionTime to 1 did the trick for me, something like this.

<PageTransition transitionTime={ transition ? 500 : 1} >