はじめに
Svelte.jsではsvelte/transitionモジュールを取り込むことによって、アニメーションを使うことができる。
今回はさくっと使うことができる5つに絞ってそれぞれどのような動きになるのか、簡単に見てみる。
svelte/transition一覧
fade
名前の通りフェードアニメーションです。
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
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
flyはパラメーターx,yのいずれかに数値を設定することでその方向に飛ばすことができる。
ちなみにパラメーターを指定しないとfadeと同じような動きになった。
xを200で指定したとき
<script>
import { fly } from 'svelte/transition';
</script>
...
<p transition:fly="{{x: 200}}">Hi Fly!</p>
flyのパラメーターなしのとき
ちなみに先ほど言ったxもyも指定しないとき
やはりfadeと同じなような気がするのでflyを使うときは注意が必要そう。
slide
slideは指定した要素をスライドさせるアニメーション
<script>
import { slide } from 'svelte/transition';
</script>
...
<p transition:slider>Hi Slide!</p>
scale
scaleは横方向にサッと消えていくようなアニメーション
<script>
import { scale } from 'svelte/transition';
</script>
...
<p transition:scaler>Hi Scale!</p>
ちなみにですが、durationパラメーターを使って数値を低く設定すると早く消えます。
durationを100に設定したとき
最後に
その他にもSVGと一緒に使うdrawといったものもあるので、気になる方は公式ドキュメントをみるといいかもしれません。