Refactor #4610

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

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;