🙌

Svelteのtransitionまとめ

2024/03/26に公開

Svelte

tech

今回の学習内容

Svelteのtransitionを業務で使う場面があり、調べたところ面白かったのでまとめてみました。

transitionを使う時

使いたいtransitionを指定して、インポートします。

import { transitionの名前 } from 'svelte/transition';

複数指定する場合は

import { transitionの名前1,transitionの名前2 } from 'svelte/transition';

Svelteのtransition

fade

ふわっと浮かび上がるアニメーション
svelte/transitionを{fade}に指定してインポートすることで使うことができます。

fadeは以下のパラメータを指定できます。

delay (number, default 0) — 開始前の待ち時間のミリ秒
duration (number, default 400) — トランジションの持続時間のミリ秒
easing (function, default linear) — イージング関数

import { fade } from 'svelte/transition';

<p transition:fade>ふわっと出るよ</p>

実装がこちら
Alt text

blur

少しぼかしが入って浮かびあがってくるアニメーション
svelte/transitionを{blur}に指定してインポートすることで使うことができる。

blurは以下のパラメータを指定できます。

delay (number, default 0) —開始前の待ち時間のミリ秒
duration (number, default 400) — アニメーションの持続時間のミリ秒
easing (function, default cubicInOut) — イージング関数
opacity (number, default 0) - アニメーションする opacity の値 (out の場合はこの値に、in の場合はこの値から)
amount (number | string, default 5) - ぼかし(blur)のサイズ。デフォルトの単位は px です

import { blur } from 'svelte/transition';

<p transition:blur>すこしぼかしてふわっと出るよ</p>

実装がこちら
Alt text

fly

flyは、名前の通り要素を飛ばす（水平または垂直に移動させる）アニメーションです。開始位置のxとyを指定して使います。
svelte/transitionを{fly}に指定してインポートすることで使うことができる。

flyは以下のパラメータを受け付けます。
delay (number, default 0) — 開始前の待ち時間のミリ秒
duration (number, default 400) — トランジションの持続時間のミリ秒
easing (function, default cubicOut) — イージング関数
x (number | string, default 0) - アニメーションで移動する x 位置のオフセット (out の場合はこの値に、in の場合はこの値から)
y (number | string, default 0) - アニメーションで移動する y 位置のオフセット (out の場合はこの値に、in の場合はこの値から)
opacity (number, default 0) - アニメーションする opacity の値 (out の場合はこの値に、in の場合はこの値から)

import { fly } from 'svelte/transition';

<p transition:fly={{x: 100, y: 100}}>x軸、y軸の指定で移動できるよ</p>

実装例がこちら
Alt text

slide

slideは、要素をスライドさせるアニメーションで、主に要素の表示と非表示に使われます。スライドの方向は自動的に計算され、オプションで持続時間やイージング関数を指定できます。
svelte/transitionを{slide}に指定してインポートすることで使うことができる。

slideは下記のパラメータを指定できます。

delay (number, default 0) — 開始前の待ち時間のミリ秒
duration (number, default 400) — トランジションの持続時間のミリ秒
easing (function, default cubicOut) — イージング関数
axis (x | y, default y) — トランジションが発生するモーションの軸

import { slide } from 'svelte/transition';

  <p transition:slide={{ duration: 300 }}>要素をスライドさせて出し入れするよ</p>

実装例がこちら
Alt text

scale

scale関数は、要素のサイズを拡大または縮小するアニメーションです。拡大縮小の比率、アニメーションの持続時間、遅延時間、イージング関数をカスタマイズできます。
svelte/transitionを{scale}に指定してインポートすることで使うことができる。

import { scale } from 'svelte/transition';

 <p transition:scale={{ start: 0.5 }}>要素が拡大縮小するよ</p>

実装例がこちら
Alt text

draw

draw関数は、SVGのパスや線を徐々に描画するアニメーションです。このトランジションは主にSVGグラフィックスに使用され、durationやdelayを指定できます。
svelte/transitionを{draw}に指定してインポートすることで使うことができる。

drawは以下のパラメータを受け付けます。

delay (number, default 0) — 開始前の待ち時間のミリ秒
speed (number, default undefined) - アニメーションの速度
duration (number | function, default 800) — トランジションの持続時間のミリ秒
easing (function, default cubicInOut) — イージング関数

import { draw } from 'svelte/transition';

<svg>
  <path transition:draw d="M10 10 H 90 V 90 H 10 L 10 10" fill="transparent" stroke="black"/>
</svg>

実装例がこちら
Alt text

crossfade

今までのtransitionと違って、sendとreceiveのペアを作って、送信側から受信側にフェードアウトしながら、受信側でフェードインしながら新しく生成されるような挙動をします。
svelte/transitionを{crossfade}に指定してインポートすることで使うことができる。

crossfadeは下のパラメータを受け付けます

delay (number, default 0) — 開始するまでのミリ秒
duration (number | function, default 800) — トランジションが継続するミリ秒
easing (function, default cubicOut) — イージング関数
fallback (function) — 受信している要素に一致するものがない場合の送信時や、送信している要素がない場合の受信時に使用するフォールバックトランジションです。

import { crossfade } from 'svelte/transition'

  let moved =false
  const [send, receive] = crossfade({})  // crossfadeではここでパラメーターを入れる

<div style="height: 60px; padding: 20px;>  box1
  {#if !moved}
    <p
      in:receive={{key:'key1'}} 
      out:send={{key:'key2'}} 
    >片方が消えると</p>
  {/if}
</div>
<div style="height: 60px; padding: 20px;">  box2
  {#if moved}
    <p
      in:receive={{key:'key2'}}
      out:send={{key:'key1'}}
    >片方で表示されるよ</p>
  {/if}
</div>

実装例がこちら
Alt text

まとめ

Svelteのtransitionについてまとめて動かしてみました。
今後、transitionで迷った時などにご参考にお使いください。

今回の学習内容

transitionを使う時

Svelteのtransition

fade

blur

fly

slide

scale

draw

crossfade

まとめ

Discussion