Vue.jsについての基礎（transitionによるアニメーション）

#はじめに
おはようございます。こんにちは。こんばんは。
ワタタクです。
今回はVue.jsのtransitionについて見けいけたらいいなと書いています。
Vue.jsでwebページを作っていく中で「Vue.jsでアニメーションってどうやってつけんの〜?」
と思い調べた結果「transition」を使うと初めて知ったので勉強してみました。
では、早速やってみます。
#使い方
##transitionタグで囲む
アニメーションさせたい要素をこのように``transitionタグ``で囲みます。
このtransitionコンポーネント内の要素に対して、アニメーションなどの動きをCSSで記述していくためのクラスが自動的に付与されます。

<font color="red">*※実際に付与されるクラス（CSS）によって動きを制御したい要素には、v-showまたはv-ifディレクティブで表示・非表示する挙動を実装する必要があります。*</font>

```vue
<transition>
    <div v-show="show" class="box">BOX</div>
</transition>

```
##CSSでスタイルを定義する。
このクラスにCSSでスタイルを定義することがアニメーションをつけることになります。
状態に応じて下記のクラスが付与されます。

| クラス       |       状態 |
|:-----------------|------------------:|
| v-enter	           |enterの開始状態     |    
| v-enter-active        |           enterのアクティブ状態 |    
| v-enter-to           |              enterの終了状態|    
| v-leave	              |               leaveの開始状態 |    
| v-leave-active            |            leaveのアクティブ状態 |   
| v-leave-to         |          leaveの終了状態|
![0611-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/86309c7f-8ff1-02fb-be77-26d1ca6511d3.png)
ざっくり分けると、**表示時はenter**で、**非表示時はleave**系のクラスが付与されます。
これを理解したうえで例としてフェードイン・フェードアウトのスタイルを作成します。

```css
/* アニメーション中のスタイル */
.v-leave-active,
.v-enter-active {
    transition: opacity 1s;
}
 
/* 表示アニメーション */
.v-enter {
    opacity: 0;
}
.v-enter-to {
    opacity: 1;
}
 
/* 非表示アニメーション */
.v-leave {
    opacity: 1;
}
.v-leave-to {
    opacity: 0;
}
```
``opacity: 1``はデフォルトの値なので省略して、下記のようにもできます。

```css
.v-leave-active,
.v-enter-active {
  transition: opacity 1s;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}
```
#トランジションを複数回使う
複数設置したいときはtransitionに``name属性``を設定することで、複数のtransitionを区別して利用することができます。
例えばname属性をbasicとした場合、クラス名は```v-``を``basic-``に置き換えます。

```vue
<transition name="basic">
    <div v-show="show" class="box">BOX</div>
</transition>
```

```css
.basic-enter {
    opacity: 0;
}
.basic-enter-to {
    opacity: 1;
}
```
#初期描画時のトランジション
初期描画時にトランジションで表示することもできます。
その場合はtransitionに``appear属性``を指定します。

```vue
<transition appear>
    <div v-show="show" class="box">BOX</div>
</transition>
```
#2020/03/28追記
上の例ではフェードイン・フェードアウトを紹介しましたがスライドの場合はどうするのか？紹介します。
###Top Slide
上からスライドしてきます。

```css:topside.css
.top-enter-active, .top-leave-active {
  transform: translate(0px, 0px); 
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.top-enter, .top-leave-to {
  transform: translateY(-100vh) translateY(0px);
}
```
<font color="red">*slide系transitionではtransformプロパティが重要になってきます。transformプロパティはその名前の通り要素の回転、拡大縮小、傾斜、移動を行うことができます。*</font>
###Top Left Slide

```css:TopLeftSlide.css
.top-left-enter-active, .top-left-leave-active {
  transform: translate(0px, 0px); 
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.top-left-enter, .top-left-leave-to {
  transform: translateY(-100vh) translateX(-100vh);
}
```
###Top Right Slide

```css:TopRightSlide.css
.top-right-enter-active, .top-right-leave-active {
  transform: translate(0px, 0px); 
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.top-right-enter, .top-right-leave-to {
  transform: translateY(-100vh) translateX(100vh);
}
```
###Bottom Slide

```css:BottomSlide.css
.bottom-enter-active, .bottom-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.bottom-enter, .bottom-leave-to {
  transform: translateY(100vh) translateY(0px);
}
```
###Bottom Left Slide
```css:BottomLeftSlide.css
.bottom-left-enter-active, .bottom-left-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.bottom-left-enter, .bottom-left-leave-to {
  transform: translateY(100vh) translateX(-100vh);
}
```
###Bottom Right Slide

```css:BottomRightSlide.css
.bottom-right-enter-active, .bottom-right-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.bottom-right-enter, .bottom-right-leave-to {
  transform: translateY(100vh) translateX(100vh);
}
```
###Left Slide

```css:LeftSlide.css
.left-enter-active, .left-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.left-enter, .left-leave-to {
  transform: translateX(-100vw) translateX(0px);
}
```
###Right Slide

```css:RightSlide.css
.right-enter-active, .right-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.right-enter, .right-leave-to {
  transform: translateX(100vw) translateX(0px);
}
```



以上。
#最後に
最後まで読んでいただきありがとうございました。
また、これまで紹介してきたのはtransitionを扱う上での基礎なので応用とかは[公式サイト](https://jp.vuejs.org/v2/guide/transitions.html)を見てください。
もし、間違い等アドバイス、ご指摘等有れば教えていただけたら幸いです。

[Vue.jsについての基礎(インストール)](https://qiita.com/watataku/items/26f2ce546fcd562e4b46)
[Vue.jsについての基礎(基本構文)](https://qiita.com/watataku/items/346a7d51b90610b08810)
[Vue.jsについての基礎(Vue-roter)](https://qiita.com/watataku/items/453c1d757c99ad2d5fb2)
もよければご覧下さい。