smoothAnimation.ts

type SmoothAnimationOptions = {
    condition: boolean,
    addClass?: (node: HTMLElement) => void,
    removeClass?: (node: HTMLElement) => void,
    animationClass?: string
}

export function smoothAnimation(node: HTMLElement, { condition, addClass, removeClass, animationClass }: SmoothAnimationOptions) {
    if(animationClass) {
        if(!removeClass) removeClass = () => node.classList.remove(animationClass);
        if(!addClass) addClass = () => node.classList.add(animationClass);
    }

    function onFinish() {
        removeClass(node);
        setTimeout(() => condition && addClass(node));
    }

    node.addEventListener('animationend', onFinish);
    node.addEventListener('animationiteration', onFinish);

    return {
        update(newOptions: SmoothAnimationOptions) {
            condition = newOptions.condition;
            if(condition) addClass(node);
        },
        destroy() {
            removeEventListener('animationend', onFinish);
            removeEventListener('animationiteration', onFinish);
        }
    }
}

When you remove a class controlling a CSS animation, the element jumps back to its original state without a transition. This Svelte use directive makes it easy to smoothly end discrete or continuous CSS animations. It "rounds" animations up to the nearest iteration.

With	Without

Usage

<i use:smoothAnimation={{ condition: loading, animationClass: 'animate-spin' }} class="fas fa-spinner-third"></i>