svelte-transition-classes

svelte-transition-classes is a custom Svelte transition that adds a set of base CSS classes to the DOM node, applies another set of classes for the start of the transition and then at the first tick of the transition, swaps the starting classes with another set of destination classes. CSS transitions and animations can be triggered from the class updates.

This Svelte transition was created to easily implement the transitions used in Tailwind CSS. The TailwindUI dropdown example component has the following comment with recommended classes to apply:

<!--
  Dropdown menu, show/hide based on menu state.

  Entering: "transition ease-out duration-100"
    From: "transform opacity-0 scale-95"
    To: "transform opacity-100 scale-100"
  Leaving: "transition ease-in duration-75"
    From: "transform opacity-100 scale-100"
    To: "transform opacity-0 scale-95"
-->

You can implement that easily with svelte-transition-classes:

Obviously there is more to do to implement a dropdown component with keyboard navigation, click handlers, aria attributes and other UX considerations, but the transition has been implemented exactly as suggested by Tailwind UI.

The base, from and to params are strings containing the class names and are all optional. The duration is required to give time for the css transitions and animations to complete. The Svelte transition delay option is also supported.

<script lang="ts">
	import classes from 'lively-transition-classes';
	let show = false;
</script>
{#if show}
  <div
    in:classes="{{
      duration: 100,
      base: 'transition ease-out duration-100',
      from: 'transform opacity-0 scale-95',
      to: 'transform opacity-100 scale-100',
    }}"
    out:classes="{{
      duration: 75,
      base: 'transition ease-in duration-75',
      from: 'transform opacity-100 scale-100',
      to: 'transform opacity-0 scale-95',
    }}"
  >
    Content here
  </div>
{/if}