- Select a language for the TTS:
- Japanese Female
- Japanese Male
- Language selected: (auto detect) - JA
Play all audios:
Vue.jsにはトランジションという便利な機能があります。 このトランジション機能とCSSを組み合わせることによって簡単にアニメーションを作成することができます。 今回はサンプル作成の流れに沿って、このトランジション機能について初学者向けにわかりやすく解説していこうと思います 😎
サンプルではVue.jsのトランジションとCSSを使ってモーダルをふわっとしたアニメーションで表示させるUIを作成していきます。 モーダルの表示部分を作成 まずはアニメーションせずにボタンをクリックしたら表示するだけのモーダルを作成していきます。今回はサンプルなので極力シンプルに実装します。 HTML <div id="sample">
<button v-on:click="show = !show"> ボタン </button> <div class="modal" v-if="show"> モーダル </div> </div> JAVASCRIPT new
Vue({ el: '#sample', data: { show: false } }) CSS .modal { position: absolute; top: 100px; left: 0; right: 0; max-width: 300px; margin: 0 auto; padding:
30px; background: #fff; border-radius: 4px; box-shadow: 0 3px 10px rgba(0,0,0,0.3); } 現時点ではボタンをクリックするとパッっと表示されるだけのモーダルです。ここにアニメーションを加えていきます。 VUE.JSのトランジションを使う
早速、冒頭で紹介したトランジション機能を使っていきます。 まずはアニメーションさせたい要素を transitionというラッパーコンポーネントで囲みます。今回はふわっと表示させたいモーダル部分が対象です。 <transition> <div class="modal" v-if="show">
Modal </div> </transition> このように transtionで囲むことによって、 v-ifで指定している要素の表示・非表示に合わせてトランジションクラスが追加・削除されるようになります。 このトランジションクラスはいくつか種類があり、それぞれのクラスにCSSでスタイルを適用してアニメーションを作成します。
トランジションクラスの種類と適用のタイミングを覚える トランジションクラスについては公式サイトにも書いていますが、個人的には少々わかりづらいです。 ここではもう少しわかりやすい言葉で解説していきます。 トランジションクラスが追加されるタイミングは大きく分けると２種類あります。 * 対象要素を挿入（表示）するとき、フェーズを「ENTER」と呼ぶ *
対象要素を削除（非表示）するとき、フェーズを「LEAVE」と呼ぶ そして各フェーズに対して3種類のクラスがあります。 それぞれ付与されるタイミングが違うのですが使い方としては下記のような感じで覚えるとわかりやすいです。 .v-(フェーズ) アニメーションする前の*開始の状態*を指定する。.v-(フェーズ)-to
アニメーションした後の*終了の状態*を指定する。.v-(フェーズ)-active アニメーション中の*動作（イージングや時間）*を指定する。 （フェーズ）の部分は enterもしくは leaveが入ります。 実際に使うことが出来るのは下記の6種類です。 対象要素を挿入（表示）するときに使うクラス .v-enter .v-enter-to
.v-enter-active対象要素を削除（非表示）するときに使うクラス .v-leave .v-leave-to .v-leave-active ちなみにこのプレフィックスである vの部分は transitionに名前をつけることで独自に変更することが可能です。 例えば transitionのname属性に fadeという名前を指定した場合のクラスは下記のようになります。
<transition name=”fade”> <div class="modal" v-if="show"> Modal </div> </transition>.fade-enter .fade-enter-to .fade-enter-active
.fade-leave .fade-leave-to .fade-leave-active これらを踏まえて最初に作成していたモーダルにアニメーションを指定していきます。 CSSを使ってアニメーションを指定する まずは表示される時のアニメーションをつけましょう。 「Enter」フェーズです。 ふわっとさせたいのでまずは opacityの値を変更します。 .v-enterと
.v-enter-toにたいして、開始と終了状態のスタイルを指定します。 .v-enter { /*開始の状態を指定する*/ opacity: 0; } .v-enter-to { /*終了の状態を指定する*/ opacity: 1; } 次にアニメーション中の動作のスタイルをtransitionプロパティを使って指定します。 .v-enter-active {
/*動作（イージングや時間）を指定する*/ transition: opacity 300ms ease-out; } この状態で動きを見てみましょう。 ボタンをクリックするとふわっとモーダルが表示されているのがわかると思います。 しかしこのままでは消える瞬間にアニメーションが指定されていません。 次に「Leave」フェーズのスタイルを指定します。
大体の場合は、「Enter」フェーズの逆の動きになると思います。 .v-leave { opacity: 1; } .v-leave-to { opacity: 0; } .v-leave-active { transition: opacity 300ms ease-out; } さて、これでふわっと表示を切り替えるモーダルを表示することが出来ました。
アニメーションのために追加したスタイルの一覧は下記になります。 .v-enter { opacity: 0; } .v-enter-to { opacity: 1; } .v-enter-active { transition: opacity 300ms ease-out; } .v-leave { opacity: 1; } .v-leave-to {
opacity: 0; } .v-leave-active { transition: opacity 300ms ease-out; } 初期状態は opacity:1なので、わざわざ指定しなくても省略可能です。 .v-enter { opacity: 0; } .v-enter-active { transition: opacity 300ms
ease-out; } .v-leave-to { opacity: 0; } .v-leave-active { transition: opacity 300ms ease-out; } マイクロインタラクションを意識したアニメーションの追加 現時点ではふわっと表示するだけですが、よりマイクロインタラクションを意識したアニメーションを追加してみましょう。
今回は表示するときに上から、消える瞬間に奥側に消えていくような動きを作ります。 表示するときにに上から降りてくる部分は下記のように開始状態の位置を translateYを使って変更します。 .v-enter { opacity: 0; transform: translateY(-20px); } .v-enter-active { transition:
opacity 300ms ease-out, transform 300ms ease-out; } また非表示のときは奥側に消えていくようにしたいので scaleを下記のように変更します。 .v-leave-to { opacity: 0; transform: scale(0.97); } .v-leave-active { transition:
opacity 270ms ease-out, transform 270ms ease-out; } これでふわっと上から降りてきて、奥側に消えていくようなモーダルを作成することが出来ました。 まとめ 今回は本当に簡単なサンプルでしたが、Vue.jsでトランジションさせたい時の使い方やどのクラスにどんなスタイルを適用していくのかが少しでも理解してもらえたら幸いです。
更に複数の要素をアニメーションさせるようなリストトランジションという機能や、まだ紹介していない便利な機能もあるのでVue.jsでアニメーションを作るときは是非いろいろと試してみてください 👍 参考サイト * Enter/Leave とトランジション一覧 https://jp.vuejs.org/v2/guide/transitions.html
