2
1

More than 1 year has passed since last update.

# SvelteKit svelte/easing関数すべて試してみた。

Last updated at Posted at 2022-12-03

# easing関数とは

transitionやanimationなどを使うときに、

10種類のeaseing関数がそれぞれ`in``out``inout`のバリエーションと、`linear`の合計31種類が用意されています。

`In`は消えるときの変化。
`Out`は表示時の変化。

`InOut`は消えるとき、表示時両方に変化をつける方法。

1 back `backIn` `backOut` `backInOut`
2 bounce `bounceIN` `bounceOut` `bounceInOut`
3 circ `circIN` `circOut` `circInOut`
4 cubic `cubicIN` `cubicOut` `cubicInOut`
5 elastic `elasticIN` `elasticOut` `elasticInOut`
6 expo `expoIN` `expoOut` `expoInOut`
7 quad `quadIN` `quadOut` `quadInOut`
8 quart `quartIN` `quartOut` `quartInOut`
9 quint `quintIN` `quintOut` `quintInOut`
10 sine `sineIN` `sineOut` `sineInOut`

## 使ったもの

• Vite + Svelte + Typescript

# 結論

## 検証コード

``````<script lang="ts">
import { backIn, backOut, backInOut, bounceIn, bounceOut, bounceInOut, circIn, circOut, circInOut, cubicIn, cubicOut, cubicInOut, elasticIn, elasticOut, elasticInOut, expoIn, expoOut, expoInOut, quadIn, quadOut, quadInOut, quartIn, quartOut, quartInOut, quintIn, quintOut, quintInOut, sineIn, sineOut, sineInOut } from 'svelte/easing';
import { crossfade } from 'svelte/transition';

const title = 'backIn'

duration: d => Math.sqrt(d * 200),

fallback(node, params) {
const style = getComputedStyle(node);
const transform = style.transform === 'none' ? '' : style.transform;

return {
duration: 1000,
easing: quintOut,
css: t => `
transform: \${transform} scale(\${t});
opacity: \${t}
`
};
}
});

interface Todo {
id: number
content: string
}

let todos: Array<Todo> = [];

const click = () => {
todos.push({ id: 1, content: title })
todos = todos
setTimeout(() => {todos = []}, 2000)
}
</script>

<button on:click={click}>実行</button>
<div class='m-auto'>
<div>
{#each todos as todo (todo.id)}
<p
out:send="{{key: todo.id}}"
>
{todo.content}
</p>
{/each}
</div>
</div>

<style>
.m-auto {
margin: auto;
}

p {
position: relative;
line-height: 1.2;
margin: 0 0 0.5em 0;
user-select: none;
border: 1px solid hsl(240, 8%, 70%);
background-color:hsl(240, 8%, 93%);
color: #333;
}
</style>
``````

2
1
0

Register as a new user and use Qiita more conveniently

1. You get articles that match your needs
2. You can efficiently read back useful information
3. You can use dark theme
What you can do with signing up
2
1