From 51446f2a8b898767eaeec83d1f88412aed031cbc Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 26 Oct 2023 12:37:23 +0300
Subject: [PATCH] Update doc for animate

---
 .../lib/animateonscroll/AnimateOnScroll.d.ts  | 23 ++-----------------
 .../lib/animateonscroll/AnimateOnScroll.js    |  2 +-
 doc/animateonscroll/BasicDoc.vue              | 16 -------------
 3 files changed, 3 insertions(+), 38 deletions(-)

diff --git a/components/lib/animateonscroll/AnimateOnScroll.d.ts b/components/lib/animateonscroll/AnimateOnScroll.d.ts
index c49a20a47..24604896a 100644
--- a/components/lib/animateonscroll/AnimateOnScroll.d.ts
+++ b/components/lib/animateonscroll/AnimateOnScroll.d.ts
@@ -8,50 +8,31 @@
  */
 import { DirectiveBinding, ObjectDirective } from 'vue';
 import { DirectiveHooks } from '../basedirective/BaseDirective';
-import { PassThroughOptions } from '../passthrough';
-import { PassThrough } from '../ts-helpers';
 
 /**
  * Defines options of AnimateOnScroll.
  */
 export interface AnimateOnScrollOptions {
     /**
-     * AnimateOnScroll scroll to add when item begins to get displayed.
+     * Style class to add when item goes into viewport, use white space as a delimeter to define multiple classes.
      */
     enterClass?: string | undefined;
     /**
-     * AnimateOnScroll scroll to add when item begins to get hidden.
+     * Style class to add when item leaves the viewport, use white space as a delimeter to define multiple classes.
      */
     leaveClass?: string | undefined;
     /**
      * Specifies the `root` option of the IntersectionObserver API
-     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root)
      */
     root?: Element | Document | null;
     /**
      * Specifies the `rootMargin` option of the IntersectionObserver API
-     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin)
      */
     rootMargin?: string;
     /**
      * Specifies the `threshold` option of the IntersectionObserver API
-     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/thresholds)
      */
     threshold?: ReadonlyArray<number>;
-    /**
-     * Whether the `enterClass` animation will run if the target is in the viewport when the page is loaded.
-     */
-    animateOnLoad?: boolean;
-    /**
-     * Used to pass attributes to DOM elements inside the component.
-     * @type {AnimateOnScrollDirectivePassThroughOptions}
-     */
-    pt?: PassThrough<AnimateOnScrollDirectivePassThroughOptions>;
-    /**
-     * Used to configure passthrough(pt) options of the component.
-     * @type {PassThroughOptions}
-     */
-    ptOptions?: PassThroughOptions;
 }
 
 /**
diff --git a/components/lib/animateonscroll/AnimateOnScroll.js b/components/lib/animateonscroll/AnimateOnScroll.js
index ace8894df..ff4ef9dbd 100644
--- a/components/lib/animateonscroll/AnimateOnScroll.js
+++ b/components/lib/animateonscroll/AnimateOnScroll.js
@@ -43,7 +43,7 @@ const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
                         entry.isIntersecting ? this.enter() : this.leave();
                     }
                 } else if (entry.isIntersecting) {
-                    this.$value.animateOnLoad ? this.enter() : (this.$el.style.opacity = '');
+                    this.enter();
                 }
 
                 this.isObserverActive = true;
diff --git a/doc/animateonscroll/BasicDoc.vue b/doc/animateonscroll/BasicDoc.vue
index 9b7cecb8b..d9031edde 100644
--- a/doc/animateonscroll/BasicDoc.vue
+++ b/doc/animateonscroll/BasicDoc.vue
@@ -26,10 +26,6 @@
             <span class="text-3xl font-bold">zoom</span>
         </div>
         <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'zoomindown', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000">
-            <span class="text-3xl font-bold">zoom-down</span>
-        </div>
-        <div class="h-30rem"></div>
         <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out">
             <span class="text-3xl font-bold">flip-left</span>
         </div>
@@ -68,10 +64,6 @@ export default {
         <span class="text-3xl font-bold">zoom</span>
     </div>
     <div class="h-30rem"></div>
-    <div v-animateonscroll="{ enterClass: 'zoomindown', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000">
-        <span class="text-3xl font-bold">zoom-down</span>
-    </div>
-    <div class="h-30rem"></div>
     <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out">
         <span class="text-3xl font-bold">flip-left</span>
     </div>
@@ -111,10 +103,6 @@ export default {
             <span class="text-3xl font-bold">zoom</span>
         </div>
         <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'zoomindown', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000">
-            <span class="text-3xl font-bold">zoom-down</span>
-        </div>
-        <div class="h-30rem"></div>
         <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out">
             <span class="text-3xl font-bold">flip-left</span>
         </div>
@@ -155,10 +143,6 @@ export default {
             <span class="text-3xl font-bold">zoom</span>
         </div>
         <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'zoomindown', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000">
-            <span class="text-3xl font-bold">zoom-down</span>
-        </div>
-        <div class="h-30rem"></div>
         <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out">
             <span class="text-3xl font-bold">flip-left</span>
         </div>