Fixed #4610 - New animate directive

components/lib/animate/Animate.d.ts

@@ -0,0 +1,71 @@
+/**
+ *
+ *  Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.
+ *
+ * [Live Demo](https://primevue.org/animate)
+ *
+ * @module animate
+ */
+import { DirectiveBinding, ObjectDirective } from 'vue';
+import { DirectiveHooks } from '../basedirective/BaseDirective';
+import { PassThroughOptions } from '../passthrough';
+import { PassThrough } from '../ts-helpers';
+
+/**
+ * Defines options of Animate.
+ */
+export interface AnimateOptions {
+    /**
+     * Animate scroll to add when item begins to get displayed.
+     */
+    enterClass?: string | undefined;
+    /**
+     * Animate scroll to add when item begins to get hidden.
+     */
+    leaveClass?: string | undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {AnimateDirectivePassThroughOptions}
+     */
+    pt?: PassThrough<AnimateDirectivePassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) directive options.
+ */
+export interface AnimateDirectivePassThroughOptions {
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link BaseDirective.DirectiveHooks}
+     */
+    hooks?: DirectiveHooks;
+}
+
+/**
+ * Binding of Animate directive.
+ */
+export interface AnimateDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
+    /**
+     * Value of the Animate.
+     */
+    value?: AnimateOptions | undefined;
+}
+
+/**
+ * **PrimeVue - Animate**
+ *
+ * _Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load._
+ *
+ * [Live Demo](https://www.primevue.org/animate/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ */
+declare const Animate: ObjectDirective;
+
+export default Animate;

components/lib/animate/Animate.js

@@ -0,0 +1,58 @@
+import { DomHandler } from 'primevue/utils';
+import BaseAnimate from './BaseAnimate';
+
+const Animate = BaseAnimate.extend('animate', {
+    mounted(el, binding) {
+        el.setAttribute('data-pd-animate', true);
+        !this.isUnstyled() && DomHandler.addClass(el, 'p-animate');
+
+        this.bindIntersectionObserver(el, binding);
+    },
+    unmounted(el) {
+        this.unbindIntersectionObserver(el);
+        clearTimeout(this.timeout);
+    },
+    timeout: null,
+    observer: null,
+    methods: {
+        bindIntersectionObserver(el, binding) {
+            const options = {
+                root: null,
+                rootMargin: '0px',
+                threshold: 1.0
+            };
+
+            this.observer = new IntersectionObserver((element) => this.isVisible(element, el, binding), options);
+            this.observer.observe(el);
+        },
+        isVisible(target, el, binding) {
+            const [intersectionObserverEntry] = target;
+
+            intersectionObserverEntry.isIntersecting ? this.enter(el, binding) : this.leave(el, binding);
+        },
+        enter(el, binding) {
+            el.style.visibility = 'visible';
+            DomHandler.addClass(el, binding.value.enterClass);
+        },
+        leave(el, binding) {
+            DomHandler.removeClass(el, binding.value.enterClass);
+
+            if (binding.value.leaveClass) {
+                DomHandler.addClass(el, binding.value.leaveClass);
+            }
+
+            const animationDuration = el.style.animationDuration || 500;
+
+            this.timeout = setTimeout(() => {
+                el.style.visibility = 'hidden';
+            }, animationDuration);
+        },
+        unbindIntersectionObserver(el) {
+            if (this.observer) {
+                this.observer.unobserve(el);
+            }
+        }
+    }
+});
+
+export default Animate;

components/lib/animate/BaseAnimate.js

@@ -0,0 +1,5 @@
+import BaseDirective from 'primevue/basedirective';
+
+const BaseAnimate = BaseDirective.extend({});
+
+export default BaseAnimate;

components/lib/animate/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./animate.cjs.js",
+    "module": "./animate.esm.js",
+    "unpkg": "./animate.min.js",
+    "types": "./Animate.d.ts"
+}

components/lib/animate/style/AnimateStyle.d.ts

@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style/BaseStyle';
+
+export interface AnimateStyle extends BaseStyle {}

components/lib/animate/style/AnimateStyle.js

@@ -0,0 +1 @@
+export default {};

components/lib/animate/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./animatestyle.cjs.js",
+    "module": "./animatestyle.esm.js",
+    "unpkg": "./animatestyle.min.js",
+    "types": "./AnimateStyle.d.ts"
+}