hello-goodbye
v0.2.2
Published
Tiny library to apply enter, leave, and move transitions to DOM elements.
Downloads
224
Readme
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.