https://github.com/kevinkace/animation-resolve

Small fn that resolves a Promise when a CSS animation completes.
https://github.com/kevinkace/animation-resolve

animation css javascript mithriljs

Last synced: 13 days ago
JSON representation

Small fn that resolves a Promise when a CSS animation completes.

• Host: GitHub
• URL: https://github.com/kevinkace/animation-resolve
• Owner: kevinkace
• Created: 2018-08-28T22:16:00.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-09-20T02:49:20.000Z (about 1 year ago)
• Last Synced: 2024-10-18T04:25:57.433Z (about 1 month ago)
• Topics: animation, css, javascript, mithriljs
• Language: JavaScript
• Size: 128 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Animation Resolve

[![NPM publish](https://github.com/kevinkace/animation-resolve/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/kevinkace/animation-resolve/actions/workflows/npm-publish.yml)

[![npm version](https://badge.fury.io/js/animation-resolve.svg)](https://badge.fury.io/js/animation-resolve)

Small module I often use with [Mithril.js](https://github.com/mitrhiljs/mithril.js) and `onbeforeremove()` to [animate a component before removing it from the DOM](https://github.com/MithrilJS/mithril.js/blob/next/docs/animation.md#animation-on-element-removal).

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

```css

.animateOut {

    animation: forwards 500ms animateOut;

}

@keyframes animateOut {

    100% {

        opacity: 0;

    }

}

```

```js

import animationResolve from "animation-resolve";

export default {

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

    view() {

        return m("div", "animates out");

    }

}

```