Transitions

Elements can be animated when they enter or leave the DOM (typically inside an @if statement) with the transition attribute:

export default function Component() {
	let $state = $watch({
		visible: false
	})

	@render {
		<button onclick={() => $state.visible = !$state.visible}>
			Toggle
		</button>

		@if ($state.visible) {
			<div transition={(e) => fade(e, { duration: 500 })}>
				Hello!
			</div>
		}
	}
}

The transition function receives the element and returns { keyframes, options } for the Web Animations API, or you can pass raw keyframes directly:

<div transition={[{ opacity: 0 }, { opacity: 1 }]}>
	Hello!
</div>

Transition functions

The @torpor/ui package includes fade, slide, grow and measure functions for common animations:

import { fade, slide } from "@torpor/ui/motion"

<div transition={(e) => fade(e, { duration: 200 })}>Fades</div>
<div transition={(e) => slide(e, { side: "left" })}>Slides</div>

Transitions in and out

Use transition-in or transition-out to animate only one direction:

@if ($state.visible) {
	<div transition-in={(e) => fade(e)}>
		Hello!
	</div>
}