class-tools - Swap CSS classes

Manipulate classes of an element (e.g. for CSS transitions)

The class-tools extension allows you to specify CSS classes that will be swapped onto or off of the elements by using
a classes or data-classes attribute. This functionality allows you to apply
CSS Transitions
to your HTML without resorting to javascript.

A classes attribute value consists of "runs", which are separated by an & character. All
class operations within a given run will be applied sequentially, with the delay specified.

Within a run, a , character separates distinct class operations.

A class operation is an operation name add, remove, or toggle, followed by a CSS class name,
optionally followed by a colon : and a time delay.

Out-of-band class manipulation

There is also the option to use apply-parent-classes, or data-apply-parent-classes, which take the same format as classes
but is instead designed for out-of-band updates, allowing you to manipulate CSS classes of an existing element in the DOM
without otherwise knowing or altering its state.

Any element with this property will schedule classes to be applied to its _parent_ element, _removing_ itself afterwards,
so it should ideally be used as part of an hx-swap-oob="beforeend: #some-element" to add them to the end of the target element.

Install

``html

`

Usage

`html