Animation Resolve

Small module I often use with Mithril.js and onbeforeremove() to animate a component before removing it from the DOM.

This module (ESM and CJS) supplies a function that returns a Promise which resolves when a CSS animation completes after updating a DOM nodes CSS class.

With Mithril

.animateOut {
    animation: forwards 500ms animateOut;
}

@keyframes animateOut {
    100% {
        opacity: 0;
    }
}

import animationResolve from "animation-resolve";

export default {
    onbeforeremove(vnode) => animationResolve(vnode.dom, "animateOut"),

    view() {
        return m("div", "animates out");
    }
}