ui-transition-test v0.0.299
Intro
UiTransition is a Vue JS component that tries to provide an easy way to use spring animations for enter and leave states of DOM nodes. Although there is an API available to get an array of spring values, this package was created to be used as a component, not a fully fledged animation library.
Quick peek
config can be customized to your taste
// basic
<UiTransition config="slideX">
<div v-if="show" />
</UiTransition>
// with arguments
<UiTransition config="slideX(0, 100)">
<div v-if="show" />
</UiTransition>
// different entrance and exit animations
<UiTransition
:config="{
enter: 'slideX',
leave: 'fade(0, 0.75)',
}"
>
<div v-if="show" />
</UiTransition>
Get started
$ npm i ui-transition
// import App, and createApp
import UiTransition from "ui-transition";
const app = createApp(App);
// basic
app.use(UiTransition);
// with your configurations
app.use(UiTransition, {
// set default values,
// build animations,
// set spring presets,
// or leave it blank...
// spring presets, and animations
// can be created on the fly.
});
The why...
I'm a big fan of smooth transitioning with a natural feel for DOM nodes. This library was created to simplify that process of using a spring animation that will run at ~60FPS. Even on low power mode.
To be honest, raf
won't achive that kind of performance, even when animating composite properties (transform, opacity). If you need to make a bulky request, be ready for some janky animations.
This is where <UiTransition />
comes in 👨🏫. <UiTransition />
uses the WAAPI
if it is available, and falls back to using CSS Keyframes
. Keyframes uses off main thread animation so you can be sure to do CPU draining tasks with your DOM node on the main thread, without having it interupted with calculations on every frame to create spring animations, ensuring a butter smooth animation with a natural feel.
Props
config
This is where all the magic happens. A dynamic prop that accepts different types. If false
is passed here, no animation will be used.
propType
string | boolean | BuildAnim
Custom types assosiated with the config
prop. The BuildAnim
type above is explained below.
// This is the BuildAnim type
interface BuildAnim extends Anim {
enter?: Anim;
leave?: Anim;
}
interface Anim {
frame: Frame;
extends?: string;
duration?: DurationAndDelay;
delay?: DurationAndDelay;
ease?: Ease;
spring?: Spring;
}
type Frame = (step: Step, phase: AnimPhase) => DynamicObject<string | number>;
type Step = (
from: number | number[],
to: number | number[]
) => number | number[];
type AnimPhase = "enter" | "leave";
interface DynamicObject<T> {
[key: string]: T;
}
type DurationAndDelay = number | AnimPhaseObject<number> | undefined;
type AnimPhaseObject<T> = {
[key in AnimPhase]?: T;
};
type Ease = string | AnimPhaseObject<string>;
type Spring = string | AnimPhaseObject<SpringRoot>;
type SpringRoot = string | SpringObject;
type SpringObject = {
tension?: number;
friction?: number;
mass?: number;
precision?: number;
velocity?: number;
stopAttempt?: number;
};
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago