Styling
Every part renders plain elements you can style, and exposes its state as data attributes.
Class names
className takes a string, or a function of the part's state.
<Remold.Morph trigger={view} className={(state) => (state.animating ? 'list busy' : 'list')}>In plain JavaScript you style the element yourself. The transition's finished promise tells you when it has settled.
Data attributes
| Attribute | Set on |
|---|---|
data-rm-animating | A part while it's animating. |
data-rm-matched | Elements paired with an old version during a transition. |
data-rm-changed | Matched elements whose box or text changed. |
data-rm-entering | New elements fading in. |
data-rm-exiting | Copies of removed elements fading out. |
data-rm-matched, data-rm-changed, data-rm-entering and data-rm-exiting are set by transition() itself, so the same selectors work without React. data-rm-animating is set by the React parts.
Rendering your own element
render replaces the default element and keeps Remold's props and ref. Pass an element, or a function of the props and state.
<Remold.Morph trigger={view} render={<ul className="grid" />}>In plain JavaScript there is nothing to replace: transition() animates whichever element you pass it.