tobyzerner
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.
Installation
npm install hello-goodbye --saveUsage
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}-activeand${name}-fromclasses are added - Next frame: the
${name}-fromclass is removed, and the${name}-toclass 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.