From eea3054b7442131e489d3e37e90e08cb523b2fe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 17 Oct 2023 15:32:18 +0300
Subject: [PATCH] Refactor #4610

---
 components/lib/animate/Animate.d.ts | 16 ++++++++++++++++
 components/lib/animate/Animate.js   |  6 ++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/components/lib/animate/Animate.d.ts b/components/lib/animate/Animate.d.ts
index fcea44202..e308755d0 100644
--- a/components/lib/animate/Animate.d.ts
+++ b/components/lib/animate/Animate.d.ts
@@ -46,6 +46,17 @@ export interface AnimateDirectivePassThroughOptions {
     hooks?: DirectiveHooks;
 }
 
+/**
+ * Defines modifiers of Animate.
+ */
+export interface AnimateDirectiveModifiers {
+    /**
+     * Whether the animation will be repeated
+     *  @defaultValue true
+     */
+    once?: boolean | undefined;
+}
+
 /**
  * Binding of Animate directive.
  */
@@ -54,6 +65,11 @@ export interface AnimateDirectiveBinding extends Omit<DirectiveBinding, 'modifie
      * Value of the Animate.
      */
     value?: AnimateOptions | undefined;
+    /**
+     * Modifiers of the tooltip.
+     * @type {AnimateDirectiveModifiers}
+     */
+    modifiers?: AnimateDirectiveModifiers | undefined;
 }
 
 /**
diff --git a/components/lib/animate/Animate.js b/components/lib/animate/Animate.js
index ada4b7b41..36ce83217 100644
--- a/components/lib/animate/Animate.js
+++ b/components/lib/animate/Animate.js
@@ -32,13 +32,15 @@ const Animate = BaseAnimate.extend('animate', {
         },
         enter(el, binding) {
             el.style.visibility = 'visible';
-            DomHandler.addClass(el, binding.value.enterClass);
+            DomHandler.addMultipleClasses(el, binding.value.enterClass);
+
+            binding.modifiers.once && this.unbindIntersectionObserver(el);
         },
         leave(el, binding) {
             DomHandler.removeClass(el, binding.value.enterClass);
 
             if (binding.value.leaveClass) {
-                DomHandler.addClass(el, binding.value.leaveClass);
+                DomHandler.addMultipleClasses(el, binding.value.leaveClass);
             }
 
             const animationDuration = el.style.animationDuration || 500;