Animate directive #12067
Animate directive #12067
Conversation
|
👋 Hi, |
github-actions
bot
added
the
Resolution: Needs Revision
| } | ||
| } | ||
|
|
||
| ngOnDestroy() { |
There was a problem hiding this comment.
Hi, you also need to unsubscribe from IntersecrtionObserver(use method unobserve)
| this.observer.observe(this.host.nativeElement); | ||
| } | ||
|
|
||
| isVisible(element) { |
There was a problem hiding this comment.
I think this code should run out of ngzone (since IntersectionObserver can throw events frequently).
| this.observer.observe(this.host.nativeElement); | ||
| } | ||
|
|
||
| isVisible(element) { |
|
|
||
| bindDocumentScrollListener() { | ||
| if (!this.documentScrollListener) { | ||
| this.documentScrollListener = this.renderer.listen(window, 'scroll', () => { |
There was a problem hiding this comment.
I think all listeners for scroll|load also should invoke outside zone
| const [intersectionObserverEntry] = element; | ||
| this.entered = intersectionObserverEntry.isIntersecting; | ||
|
|
||
| if (this.entered || this.isInViewport()) { |
There was a problem hiding this comment.
I think you should call this method once and save(the result) it in a variable, because using the getBoundingClientRect method causes reflow in browser
|
|
||
| animate() { | ||
| if (this.loaded) { | ||
| if (this.isInViewport() && !this.entered) { |
There was a problem hiding this comment.
the same store variable from isInViewport
|
👋 Hi, |
|
👋 Hi, |
|
👋 Hi, |
2 similar comments
|
👋 Hi, |
|
👋 Hi, |
cetincakiroglu
removed
the
Resolution: Needs Revision
Add pAnimate directive to handle animations on a scroll by adding/removing PrimeFlex Animation classes.