Morbido simplify the management of transitions for DOM elements with changing size.
- Slider with changing height due to items with different sizes
- Accordion with opening/closing areas
yarn add morbido
import Morbido from 'morbido';
...
const morbido = new Morbido(target, {
timeout: {
exit: 600,
mutate: 1200,
enter: 600,
},
});
...
target.innerText =
'Tombola caprese, forte ballerina. Cupola lasagne tombola tortellini \
pronto zucchini ciao confetti paparazzi, panini maestro, pepperoni \
pronto lasagne ciao barista. Parmigiana fritti forte fritti cappuccino \
pizza macaroni, espresso pasta gnocchi pepperoni paparazzi biscotti, \
biscotti. Mamma mandolino pronto macaroni mamma berlusconi spaghetti \
tombola caprese cupola. Espresso barista barista salami.';
morbido.mutate();
- Previous state is restored without transition and previous width and heigth are set inline
- Await for
onExit
callback - New width and height are set inline to the exiting element
- Await for
onMutate
callback - The exiting element is replaced with the entering one
- Await for
onEnter
callback - Current state is saved for future mutations
The mutation object contains information about size change, with values before and after the mutation occurs.
{
width: {
from: 480,
to: 480,
},
height: {
from: 240,
to: 480,
},
};
The exiting element is a target
clone with previous state. This is updated (a new clone is created) on these circumstances:
- the Morbido instance is created
watch
method is called- a mutation is ended
The target
passed when the Morbido instance is created.
Type: object
Type: boolean
Default: true
When true
on watch mode it observes for attribute changes
Type: boolean
Default: true
When true
on watch mode it observes for text node changes
Type: boolean
Default: true
When true
on watch mode it observes for child list changes
Type: boolean
Default: true
When true
on watch mode it observes for changes on all discendants too
Type: object
Default:
{
exit: 'exit',
mutate: 'mutate',
enter: 'enter',
},
These classes will be added during the three phases of a mutation.
Type: object
Default:
{
exit: 0,
mutate: 0,
enter: 0
}
This object can be set to avoid the return of promises in the callbacks.
Type: function
Default: f => f
This function is called before the previous state element starts exiting. As soon as the returned value resolves (if it's a promise) and timeout.exit
time passed the exiting element receives the width and height inline.
Type: function
Default: f => f
This function is called just after the width and height of the exiting element changed. As soon as the returned value resolves (if it's a promise) and timeout.mutate
time passed the exiting element is replaced with the entering one.
Type: function
Default: f => f
This function is called after the exiting element is replaced with the entering one. As soon as the returned value resolves (if it's a promise) and timeout.enter
time passed the "previous state" is saved again.
Starts a mutation process (see mutation lifecycle).
Starts watching for mutations relaying on the Mutation Observer API.
Use this mode with caution: every dom change will start a mutation process.
Stops the watch mode.