Plugins

Transition plugin

The transition plugin adds two directives x-alt-transition and x-vue-transition. Both directives add another way to define transitions. The new definition is simply transformed to a set of native Alpine transition directives that are then bind to the element.

Add transition plugin to your page with the CDN or as a npm package.

<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/plugins/transition/dist/cdn.min.js"></script>

x-alt-transition

This directive adds more timeline like way of defining transitions.

<div x-alt-transition='{
  "enter": ["opacity-0 scale-y-50", "transition ease-out duration-100 origin-top", "opacity-100"],
  "leave": ["opacity-100", "transition ease-in duration-100 origin-top", "opacity-0 scale-y-50"]
}'
></div>

The directive allows the following modifiers:

• json - the directive value is parsed as JSON. This can be useful for CSP builds of Alpine.

x-vue-transition

This directive allows defining Vue like transitions:

<div x-vue-transition="fade"></div>

You can read about Vue transitions in Vue documentation.