Support SSR without error #1
Conversation
| this.addIntersectionObserver(); | ||
| const animationDistance = this.direction === 'right' || this.direction === 'down' ? '-' + this.animationDistance : this.animationDistance; | ||
| (this.el.querySelector('.nice-anim') as HTMLElement).style.setProperty('--distance', animationDistance); | ||
| } |
There was a problem hiding this comment.
| } | |
| } else { | |
| this.el.querySelector('.nice-anim').classList.add(`slide-${this.direction}`); | |
| } |
Instead of adding a new property, it may be better to just apply the "slide-{direction}" class if this.hasIOSupport is false. That way everything will still animate in the way it was originally intended, just not on intersection.
This could maybe even be extended to just a helper method instead of having it in two places in the code.
There was a problem hiding this comment.
the thing is.. there are 2 different use cases...
one: u rehydrate a ssr app.. this way, the element should be opacity 0 after the ssr, so that there is no flickering
two: ssr only... the element should be visible straight away, or like with your improved version, slide in instantly.. whats your take on this?
There was a problem hiding this comment.
hey since it was late for me already I was a bit quick .. so first of all.. thank you for your great component and for sharing it!!
There was a problem hiding this comment.
The question is, can we tell if it's a SSR only or a rehydration...? If we could, then handling all three situations will work great. Otherwise, we may have some issues. I'm not sure if there's a solid way to check the difference, especially if people use this component without StencilJS.
Also, requiring a property every time may be a pain for people doing SSR. Possibly a global setting could work?
There was a problem hiding this comment.
I don't know of a way to tell this..
when ssring with stencil there is a prop, but I intentionally did not use this so it works with all wc-setups..
I think the standard use-case is rehydration... its also what stencil does.. thats why I left the .nice-anim as default class.. pure ssr only setups would have to set a fallbackCSSClass="" on all the <nice-anim> instances... I think thats ok, since its not the main use case...
There was a problem hiding this comment.
@flobacher I'm looking at this soon. I'll need to test out the configuration to get a feel for how it works. Would be super helpful if you could explain the way you implemented the configuration and why? It looks nice, I'd just like to hear the reasoning behind it. I still have lots to learn :)
There was a problem hiding this comment.
^ An example code piece of usage would be great.
There was a problem hiding this comment.
will try to provide this asap.. I already used/tested it in a project where I use nice-anim =)
There was a problem hiding this comment.
Were you able to get that example? I do understand what this does now. Does the class persist between each NiceAnim and updates to it in plain TS? I'm unable to test this right now, but probably will tonight. Also I'm wondering if Build.isBrowser will error on something that isn't Stencil.
There was a problem hiding this comment.
@flobacher I'd like to get this merged. So I'm still unsure on if the configuration persists between all NiceAnim instances, and if having Build.isBrowser will error on a non-Stencil site. Once I have those figured out I'll be merging this finally 😄
No description provided.