pull/4649/head
Tuğçe Küçükoğlu 2023-10-17 15:32:18 +03:00
parent c675c8f4ea
commit eea3054b74
2 changed files with 20 additions and 2 deletions

View File

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

View File

@ -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;