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 --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.