Alpine.jsのアニメーションまとめ

# x-transitionを使う
https://alpinejs.dev/directives/transition

# 基本的な使い方
アニメーションを付けたい要素に
```
x-transition
```
を付けるだけ。チョロいぞこれは。

::: note
オプションは
```
x-transition.delay.500ms
```
みたいにドットで繋ぐだけです。（後半でちょろっと解説しています。）
:::

## コードと動作一覧
### ①x-transition

縮小・拡大＋透明度を上げながら文字が表示されています。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNKbwKm" data-user="gorimatyan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/gorimatyan/pen/rNKbwKm">
  Untitled</a> by gorimatyan (<a href="https://codepen.io/gorimatyan">@gorimatyan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

::: note warn
<b>デフォルト動作の注意点</b>
デフォルトの動作には「opacity（透明度）」と「scale（縮小・拡大）」の2つが含まれています。

「opacity」のみアニメーションを付けたいときは「x-transition.opacity」
「scale」のみアニメーションを付けたいときは「x-transition.scale」と設定すればOKです
:::



### ②x-transiton.opacity
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwJOgmO" data-user="gorimatyan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/gorimatyan/pen/RwJOgmO">
  Untitled</a> by gorimatyan (<a href="https://codepen.io/gorimatyan">@gorimatyan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

::: note
表示速度を数値で設定することもできます。
```
// 0.5秒で表示したい場合
x-transition.opacity.duration.500ms
```
:::

### ②x-transiton.scale
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNyWOqw" data-user="gorimatyan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/gorimatyan/pen/WNyWOqw">
  Untitled</a> by gorimatyan (<a href="https://codepen.io/gorimatyan">@gorimatyan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

表示開始時のサイズを数値で設定することもできます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNyWEbG" data-user="gorimatyan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/gorimatyan/pen/WNyWEbG">
  Untitled</a> by gorimatyan (<a href="https://codepen.io/gorimatyan">@gorimatyan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### ③x-transiton.scale.origin.[方向]
top,right.buttom.leftで指定した方向から文字が出てきます。
②との微妙な違いを見比べてみてください。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwJOgXm" data-user="gorimatyan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/gorimatyan/pen/RwJOgXm">
  Untitled</a> by gorimatyan (<a href="https://codepen.io/gorimatyan">@gorimatyan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### ④.delay
それぞれのアニメーションに.delayを付ければアニメーションの動作開始を遅らせることができます。

# まとめ
### ①アニメーションの種類（3種類）
### (1)デフォルト
x-transiton

### (2)透明度
x-transiton.opacity

### (3)拡大縮小
x-transiton.scale
***
### ②オプション

### (1)アニメーション開始地点のオプション
.origin.[方向]

::: note
origin.top.right みたいに複数組み合わせることも可能
:::

### (2)開始遅延
.delay.[ミリ秒(ms)]

----
簡単すぎて申し訳なくなる。