hello-goodbye

Hello Goodbye

Tiny library to apply enter, leave, and move transitions to DOM elements. Inspired by Vue's <transition> and <transition-group> components, but in plain DOM.

Demo

Installation

npm install hello-goodbye --save

Usage

hello

Apply an enter transition to a newly-added element.

import { hello } from 'hello-goodbye';

parent.appendChild(el);
hello(el);

.enter-active { transition: transform .5s }
.enter-from { transform: translateY(100%) }

goodbye

Apply a leave transition to an element and remove it when finished.

import { goodbye } from 'hello-goodbye';

goodbye(el).then(() => parent.removeChild(el));

.leave-active { transition: opacity .5s }
.leave-to { opacity: 0 }

move

Smoothly move elements into their new positions.

import { move } from 'hello-goodbye';

move(parent.children, () => {
    // Shuffle the children
    for (let i = parent.children.length; i >= 0; i--) {
        parent.appendChild(parent.children[Math.random() * i | 0]);
    }
});

.move { transition: transform .5s }

transition

Run a named transition on an element. Used under the hood by hello and goodbye.

• The ${name}-active and ${name}-from classes are added
• Next frame: the ${name}-from class is removed, and the ${name}-to class is added
• When the transition ends: all classes are removed and the returned Promise resolves

import { transition } from 'hello-goodbye';

transition(
    el: HTMLElement,
    name: string,
    options?: TransitionOptions
): Promise<void>;

type TransitionOptions = {
    prefix?: string // optional prefix for animation class names
};

cancel

Cancel any currently-running transition on an element.

import { cancel } from 'hello-goodbye';

cancel(el: HTMLElement);

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Changelog

0.2.2 (2024-01-10)

Bug Fixes

• prevent transitions ending early due to transitioning child elements (789dc79)