【写真とコード付き】Vue.jsでフェードイン・フェードアウトする簡単は方法

<br>

## はじめに
この記事は**Vue.jsの基本は抑えられている程**で、話を進めていきます。もしVue.jsを初めて触ると言う方は、こちらの記事を参照していただければと思います。

⬇️**【写真とコード付き】Vue.jsの構築から基本的な書き方まで1から解説【超初心者向け】**
https://qiita.com/yuki4839/items/62f40564e3f4c8dbfc51
<br>

さて今回は、**Vue.jsでフェードイン・フェードアウト**の仕方について、ご紹介させていただこうと思います。

早速いきましょう。
<br>
<br>

## 実行環境
使用ツール、デバイスはこちら

<ul>
  <li>Google chrome</li>
  <li>Mac OS Catalina</li>
  <li>Visual Studio Code</li>
</ul>
<br>

また今回使用するディレクトリ階層はこちら。

```html:ディレクトリ階層
─ root(任意のディレクトリ)
│
├─ index.html
│
├─ css
│   └ style.css
│
└─ js
    └ main.js
```
<br>

各ファイルの初期値はこちら。

```html:index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./css/style.css">
</head>

<body>

  <div id="web">
    <p>
      {{ context }}
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>

</html>
```

```css:style.css
/* 出力結果を見やすくするためのスタイルです */
body {
  background-color: #add8e6;
}

#web {
  background-color: #fff;
  margin: 20px;
  padding: 20px;
  width: 300px;
}
```

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    context: `Hello Vue.js!`
  }
})
```
<br>

現時点での出力結果はこちら。

![スクリーンショット 2020-12-12 21.13.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/fb3335b5-8937-d54c-f34d-0c96d64eaff6.png)
<br>
<br>

## transition
単刀直入に言うと、フェードイン・フェードアウトを行うには、マウントしたHTMLタグ内で `transitionタグ` を利用することによって作成することができます。

まずは実際のコードをご覧ください。

```html:index.html
<!-- headタグ省略 -->
<body>

  <div id="web">
    <button v-on:click="show=!show">
      Click
    </button>
    <transition>
      <p v-show="show">
        This sentence is a Transition.
      </p>
    </transition>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>

</body>
```

```css:style.css
body {
  background-color: #add8e6;
}

#web {
  background-color: #fff;
  margin: 20px;
  padding: 20px;
  width: 300px;
}

.v-enter-active,
.v-leave-active {
  transition: 3s;
}

.v-enter,
.v-leave-to {
  opacity: 0;
}
```

```js:main.js
var web = new Vue({
  el: '#web',
  data: {
    show: false
  }
})
```

#### 手順
①まず `v-on:click="show=!show"` (falseとtrueの切り替え) でクリックイベントを作成。
②次に `v-show="show"` でクリックイベントの対象要素を指定。
③クリックイベントの対象要素を `transitionタグ` で囲む。
<br>

#### 動作手順
①Vue.js の data が false に設定されているので、`pタグ には display: none;` が**当たっている。**
②buttonタグ のボタンをクリックすると、`pタグ の display: none;` が**外れる。**
③display: none; が外れると同時に、transitionタグ の配下の要素(上記なら pタグ)に、 `class="v-enter-active v-enter"` が**当てられる。**
④イベントが終了したら、`class="v-enter-active v-enter"` が**外れる。**
⑤再度 buttonタグ のボタンをクリックすると、transitionタグ の配下の要素(上記なら pタグ)に、 `class="v-leave-action v-leave-to"` が**当てられる。**
⑥イベントが終了したら、`class="v-enter-active v-enter"` が**外れ**、`display: none;` が**当てられる。**
<br>

#### 動作確認
まずデフォルトはこちら。

![スクリーンショット 2020-12-15 23.18.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/9460a3ed-9a4f-37a1-35fe-c6639c56ec40.png)

ボタンをクリックすると、ゆっくりフェードイン。

![スクリーンショット 2020-12-15 23.19.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/6ff09f5b-bf85-2b38-1fac-78d1840fd4f2.png)

しばらくすると描画完了です。

![スクリーンショット 2020-12-15 23.18.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/70f52bfa-ed72-2a67-217f-8389bbf44ee3.png)

再びボタンを押すと、ゆっくりフェードアウト。

![スクリーンショット 2020-12-15 23.19.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/aa5744d1-20db-7caf-4740-0e53c181c576.png)

しばらくすると描画完了です。

![スクリーンショット 2020-12-15 23.18.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/644742d7-adcf-93a8-76f8-897a033620d4.png)

<br>
<br>

## まとめ
今回は `Vue.js` での**フェードイン・フェードアウトの方法**を解説いたしました。ぜひ実際にコードを書いて見てください！

最後まで読んでいただき、ありがとうございました！
<br>
<br>
<br>

筆者：yuki｜IT業界のリアルな転職事情など発信｜元トップ営業マン(訪販)→未経験からエンジニア転職へ
Qiita：https://qiita.com/yuki4839
Twitter：https://twitter.com/yukifullstack
<br>