animation-resolve

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

Usage no npm install needed!

<script type="module">
  import animationResolve from 'https://cdn.skypack.dev/animation-resolve';
</script>

README

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 0.5s animateOut;
}

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

import animationResolve from "animation-resolve";

export default {
    onbeforeremove(vnode) {
        return animationResolve(vnode.dom, "animateOut");
    },
    view() {
        return m("div", "animates out");
    }
}