スタイリングとアニメーション

Svelte では、CSS を使ったスタイリングと、トランジションやアニメーションを利用して、インタラクティブで魅力的なユーザーインターフェースを作成できます。この章では、Svelte におけるスタイリングとアニメーションの基本について学びます。

1. CSS とスコープ付きスタイル

Svelte コンポーネント内で定義されたスタイルは、そのコンポーネントにのみ適用されるスコープ付きとなります。これにより、他のコンポーネントへのスタイルの漏れを防ぎます。

例: スコープ付きスタイルを持つコンポーネント

Button.svelte:

<button>クリック</button>

<style>
  button {
    background-color: #ff3e00;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
  }
</style>

この例では、Buttonコンポーネント内の<button>要素に対してスタイルを適用しています。このスタイルはButtonコンポーネント内でのみ有効であり、他のコンポーネントの<button>要素には影響しません。

2. トランジションとアニメーション

Svelte では、transition関数を使用して、コンポーネントのマウントやアンマウント時に滑らかなアニメーションを実装できます。

例: フェードイン・フェードアウトアニメーション

Fade.svelte:

<script>
  import { fade } from 'svelte/transition';
</script>

<div in:fade={{ duration: 300 }}>
  フェードインとフェードアウトのデモ
</div>

この例では、fadeトランジションを使用して、要素の表示と非表示をフェードイン・フェードアウトのアニメーションで行います。トランジションのオプションとしてdurationを指定することで、アニメーションの持続時間を制御できます。

3. サードパーティの CSS フレームワークとの統合

Svelte プロジェクトでは、Bootstrap や Tailwind CSS などのサードパーティの CSS フレームワークを使用することも可能です。これにより、デザインの開発速度を向上させることができます。

例: Tailwind CSS の統合

プロジェクトのrollup.config.jsまたはwebpack.config.jsに Tailwind CSS の設定を追加し、使用したいコンポーネント内で直接クラスを利用します。

App.svelte:

<div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md">
  Tailwind CSSを使用したスタイリングのデモ
</div>

4. 実践的なアニメーションの使用例

Svelte のアニメーション機能を利用して、ユーザーの操作に対するフィードバックや、データの表示の際の視覚的な魅力を高めることができます。

例: リストアイテムの追加と削除のアニメーション

List.svelte:

<script>
  import { flip } from 'svelte/animate';
  import { each } from 'svelte/transition';
  let items = [{ id: 1, name: 'アイテム1

' }, { id: 2, name: 'アイテム2' }];

  function removeItem(id) {
    items = items.filter(item => item.id !== id);
  }
</script>

<ul>
  {#each items as item (item.id)}
    <li animate:flip={{ duration: 200 }}>
      {item.name}
      <button on:click={() => removeItem(item.id)}>削除</button>
    </li>
  {/each}
</ul>

この例では、リストアイテムの追加と削除時にflipアニメーションを使用しています。これにより、アイテムの変更が滑らかに行われ、ユーザー体験が向上します。