Tiny library to apply enter, leave, and move transitions to DOM elements.
npm install hello-goodbyeTiny library to apply enter, leave, and move transitions to DOM elements. Inspired by Vue's
!Size
``sh`
npm install hello-goodbye --save
Apply an enter transition to a newly-added element.
`ts
import { hello } from 'hello-goodbye';
parent.appendChild(el);
hello(el);
`
`css`
.enter-active { transition: transform .5s }
.enter-from { transform: translateY(100%) }
Apply a leave transition to an element and remove it when finished.
`ts
import { goodbye } from 'hello-goodbye';
goodbye(el).then(() => parent.removeChild(el));
`
`css`
.leave-active { transition: opacity .5s }
.leave-to { opacity: 0 }
Smoothly move elements into their new positions.
`ts
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]);
}
});
`
`css`
.move { transition: transform .5s }
Run a named transition on an element. Used under the hood by hello and goodbye.
1. The ${name}-active and ${name}-from classes are added${name}-from
2. Next frame: the class is removed, and the ${name}-to class is added
3. When the transition ends: all classes are removed and the returned Promise resolves
`ts
import { transition } from 'hello-goodbye';
transition(
el: HTMLElement,
name: string,
options?: TransitionOptions
): Promise
type TransitionOptions = {
prefix?: string // optional prefix for animation class names
};
`
Cancel any currently-running transition on an element.
`ts
import { cancel } from 'hello-goodbye';
cancel(el: HTMLElement);
``
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.