Transition

Transition classes are used to animate component states.

There are six classes applied for enter / leave transitions.

Enter

opacity: 0

opacity: 1

ui-enter-from

ui-enter-active

ui-enter-to

Leave

opacity: 1

opacity: 0

ui-leave-from

ui-leave-active

ui-leave-to

For this example, we’ll use the Collapse component, but this is applicable to other components as well.

<div data-ui-collapse class="panel" hidden>...</div>

.panel.ui-enter-active,
.panel.ui-leave-active {
  transition: opacity 200ms ease-in-out;
}
.panel.ui-enter-to,
.panel.ui-leave-from {
  opacity: 1; /* is not required */
}
.panel.ui-enter-from,
.panel.ui-leave-to {
  opacity: 0;
}

We can change the class prefix using the data-ui-transition-name attribute.

<div data-ui-collapse data-ui-transition-name="fade" hidden>...</div>

.fade-enter-active,
.fade-leave-active {
  transition: opacity 200ms ease-in-out;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

Tailwind CSS

If you use Tailwind CSS, you can set animation classes via data attributes.

<div
  data-ui-collapse
  data-ui-enter-from="opacity-0"
  data-ui-leave-to="opacity-0"
  data-ui-leave-from="opacity-100"
  data-ui-enter-to="opacity-100"
  data-ui-enter-active="transition-opacity duration-200"
  data-ui-leave-active="transition-opacity duration-200"
  hidden
>
  ...
</div>

Jolty UI

We provide ready-to-use classes for animation.

@import "jolty-ui/dist/transitions/collapse.css";

<div data-ui-collapse data-ui-transition-name="collapse" hidden>...</div>

or can use animation classes in CSS.

@import "jolty-ui/dist/animation.css";

.ui-enter-active {
  animation: var(--animation-collapse-in);
}
.ui-leave-active {
  animation: var(--animation-collapse-out);
}

or with Tailwind CSS.

<div
  data-ui-collapse
  data-ui-enter-active="animate-[--animation-collapse-in]"
  data-ui-leave-active="animate-[--animation-collapse-out]"
  hidden
>
  ...
</div>

JavaScript Hooks

new Dialog("#my-dialog", {
  transition: {
    css: false,
    enter(el, done) {
      el.animate({ translate: ["0 2rem", 0], opacity: [0, 1] }, { duration: 200 }).finished.then(done);
    },
    leave(el, done) {
      el.animate({ translate: "0 -2rem", opacity: 0 }, { duration: 200 }).finished.then(done);
    },
  },
});

Built-in transitions

If you are using the jolty-ui library, it already includes ready-to-use transitions

.fade-enter-active {
  animation: var(--animation-fade-in);
}
.fade-leave-active {
  animation: var(--animation-fade-out);
}
 
.scale-up-fade-enter-active {
  animation: var(--animation-scale-in-up), var(--animation-fade-in);
}
.scale-up-fade-leave-active {
  animation: var(--animation-scale-out-up), var(--animation-fade-out);
}
 
.scale-up-down-fade-enter-active {
  animation: var(--animation-scale-in-up), var(--animation-fade-in);
}
.scale-up-down-fade-leave-active {
  animation: var(--animation-scale-out-down), var(--animation-fade-out);
}
 
.scale-down-fade-enter-active {
  animation: var(--animation-scale-in-down), var(--animation-fade-in);
}
.scale-down-fade-leave-active {
  animation: var(--animation-scale-out-down), var(--animation-fade-out);
}
 
.scale-down-up-fade-enter-active {
  animation: var(--animation-scale-in-down), var(--animation-fade-in);
}
.scale-down-up-fade-leave-active {
  animation: var(--animation-scale-out-up), var(--animation-fade-out);
}
 
.slide-down-fade-enter-active {
  animation: var(--animation-slide-in-down), var(--animation-fade-in);
}
.slide-down-fade-leave-active {
  animation: var(--animation-slide-out-down), var(--animation-fade-out);
}
 
.slide-down-up-fade-enter-active {
  animation: var(--animation-slide-in-down), var(--animation-fade-in);
}
.slide-down-up-fade-leave-active {
  animation: var(--animation-slide-out-up), var(--animation-fade-out);
}
 
.slide-up-fade-enter-active {
  animation: var(--animation-slide-in-up), var(--animation-fade-in);
}
.slide-up-fade-leave-active {
  animation: var(--animation-slide-out-up), var(--animation-fade-out);
}
 
.slide-up-down-fade-enter-active {
  animation: var(--animation-slide-in-up), var(--animation-fade-in);
}
.slide-up-down-fade-leave-active {
  animation: var(--animation-slide-out-down), var(--animation-fade-out);
}
 
.collapse-enter-active {
  animation: var(--animation-collapse-in);
}
.collapse-leave-active {
  animation: var(--animation-collapse-out);
}
 
.collapse-fade-enter-active {
  animation: var(--animation-collapse-in), var(--animation-fade-in);
}
.collapse-fade-leave-active {
  animation: var(--animation-collapse-out), var(--animation-fade-out);
}

They can be used in two ways

By the data-ui-transition-name attribute

<div data-ui-collapse data-ui-transition="collapse" hidden>
  ...
</div>

or via js

new Collapse("#my-collapse", { transition: 'collapse' });

Options

All components support the following animation options.

Attribute	Type	Default	Description
`transition`	`String, Boolean, TransitionOptions`	`true`	Object with transition options or string to set the `name` option for the transition.

`enabled`	`String, Boolean, Function`	`'auto'`	Defines whether the module is enabled; when set to `auto`, it checks the media query `(prefers-reduced-motion: no-preference)`. Attribute: `data-ui-transition-enabled`
`name`	`String`	`'ui'`	Defines the name of the transition that will be used to apply CSS rules. Attribute: `data-ui-transition-name`
`css`	`Boolean`	`true`	Defines if the transition should be applied using CSS rules.
`cssVariables`	`Boolean`	`false`	Adds special CSS variables during the transition to the element and removes them after completion.
`enter`	`Function`	`null`	Accepts a function `enter(el, done){}`. call the `done()` callback to indicate transition end
`enterActive`	`String, Object`	`''`	CSS classes or styles applied during the entire entering phase. Attribute: `data-ui-enter-active`
`enterFrom`	`String, Object`	`''`	CSS classes or styles applied at the start of the entering phase. Attribute: `data-ui-enter-from`
`enterTo`	`String, Object`	`''`	CSS classes or styles applied at the end of the entering phase. Attribute: `data-ui-enter-to`
`leave`	`Function`	`null`	Accepts a function `leave(el, done){}`. call the `done()` callback to indicate transition end
`leaveActive`	`String, Object`	`''`	CSS classes or styles applied during the entire leaving phase. Attribute: `data-ui-leave-active`
`leaveFrom`	`String, Object`	`''`	CSS classes or styles applied at the start of the leaving phase. Attribute: `data-ui-leave-from`
`leaveTo`	`String, Object`	`''`	CSS classes or styles applied at the end of the leaving phase. Attribute: `data-ui-leave-to`
`duration`	`Number`	`null`	Defines the duration of the transition. Should be used only when the animation occurs on child elements.

If the cssVariables option is enabled, special CSS variables are added during the transition to the element and are removed after its completion.

By default, the option is enabled for the Collapse and Tablist components.

Name	Type	Description
`--ui-transition-width`	`Number`	The width of the element at the start of the transition.
`--ui-transition-height`	`Number`	The height of the element at the start of the transition.