More than 3 years have passed since last update.

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

Posted at 2020-12-15

はじめに

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

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

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

早速いきましょう。

実行環境

使用ツール、デバイスはこちら

Google chrome
Mac OS Catalina
Visual Studio Code

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

ディレクトリ階層

─ root(任意のディレクトリ)
│
├─ index.html
│
├─ css
│   └ style.css
│
└─ js
    └ main.js

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

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>

style.css

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

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

main.js

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

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

transition

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

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

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>

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;
}

main.js

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

手順

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

動作手順

①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; が当てられる。