Update doc for animate

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;
 }
 
 /**

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;

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>