はじめに

Svelte.jsではsvelte/transitionモジュールを取り込むことによって、アニメーションを使うことができる。
今回はさくっと使うことができる5つに絞ってそれぞれどのような動きになるのか、簡単に見てみる。

svelte/transition一覧

名前の通りフェードアニメーションです。
svelte/transitionをインポートする際にfadeを指定することで使うことができる。
そしてfadeしたい部分にtransition:fadeを追加する。※後に続くアニメーション紹介では省略します。

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

<p transition:fade>Hi Fade!</p>

さらにfadeにdelayパラメータを渡すことによって、fadeを遅延させることが可能です。

  <p transition:fade="{{delay: 250}}">Hi Fade!</p>

※デフォルトdelay値は0

blurはfadeと少し似ているがぼかしながら消えていくアニメーション。


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

...

<p transition:blur>Hi Blur!</p>

また、delay意外にもduration、opacity、amountといったパラーメーターがあります。

試しにopacityを500にしたとき

<p transition:blur="{{opacity: 500}}">Hi Blur! </p>

先ほどよりも不透明度が強く感じる。長く見てると気持ち悪くなりそう、、

flyはパラメーターx,yのいずれかに数値を設定することでその方向に飛ばすことができる。
ちなみにパラメーターを指定しないとfadeと同じような動きになった。

xを200で指定したとき

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

...

<p transition:fly="{{x: 200}}">Hi Fly!</p>

ちなみに先ほど言ったxもyも指定しないとき

やはりfadeと同じなような気がするのでflyを使うときは注意が必要そう。

slideは指定した要素をスライドさせるアニメーション

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

...

<p transition:slider>Hi Slide!</p>

scaleは横方向にサッと消えていくようなアニメーション


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

...

<p transition:scaler>Hi Scale!</p>

ちなみにですが、durationパラメーターを使って数値を低く設定すると早く消えます。

durationを100に設定したとき

その他にもSVGと一緒に使うdrawといったものもあるので、気になる方は公式ドキュメントをみるといいかもしれません。