Interactivity

Transitions And Local Styles

Svelte transitions, imports, keyed blocks, and component-local styles work inside TemplateX islands.

Add A Transition#

Import Svelte helpers in the view's <script> block and use them in markup:

php
<script>  import { fade, fly } from 'svelte/transition';  import { cubicOut } from 'svelte/easing';  let active = true;</script><button type="button" onclick={() => active = ! active}>Toggle</button>{#if active}  <p in:fly="{{ y: 8, duration: 200, easing: cubicOut }}" out:fade="{{ duration: 120 }}">    Visible  </p>{/if}

Svelte directive parameters can use Svelte's quoted object syntax. TemplateX preserves those directive attributes for Svelte.

Add Local Styles#

Component-local style blocks are collected into the generated Svelte component:

php
<style>  p {    color: currentColor;  }</style>

In production builds, Vite extracts Svelte component styles to CSS files. TemplateX prints those CSS files next to the generated island module.