2015/07/02

Vue.jsのv-transitionをちょっと実践的に使ってみた

Labels: , ,
条件に合わせてCSSを変えたくてTransitionについて調べてみた。

でも、公式ガイドにあるサンプルを見ても今ひとつ理解できなかった。
ボタンを押して表示される、消えるだけなので、どんなときに使ってよいかイマイチわからない。

ということで、もうちょっと実践的なサンプルをつくってみた。



トランジションシステムとは



Vue.js のトランジションシステムを使用すると、DOM から要素を取得したり削除するといったトランジションエフェクトを自動的に適用できます。Vue.js は自動的に、適切な時に、あなたのために CSS トランジションまたはアニメーションをトリガするため、CSS クラスを追加または削除し、そしてトランジションの間は、カスタム DOM の操作をするために、JavaScript フック関数を提供することができます。

引用元：トランジションシステム - vue.js

（私が理解している範囲で）もっと簡単に説明すると、

「v-if（またはv-show）」がtrueならDOM要素を表示して、「.enter」や「.leave」のCSSを適用する。
ついでにJavaScriptの「enter: function(){}」や「leave: function(){}」が実行される。

「v-if（またはv-show）」がfalseならDOM要素を非表示にする。


※v-ifは、falseのときにDOM要素を削除する。
※v-showは、falseのときにDOM要素はそのままにstyle=”display: none;”を適用する。



トランジションシステムを使ってみる


公式ガイドの「トランジションシステム」にもサンプルはあるが、いかんせん意味がわかりにくい。
ということで、今回は次のような入力フォームをv-transitionを使って作ってみた。

<!-- index.html -->
<!doctype html>
<html lang="ja">
<head>
    <meta chraset="utf-8">
    <title>ファイル出力</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="transition-demo">
        <input type="text" v-model="input | validator" />
        <p class="success" v-if="validationInput"  v-transition="input">入力値：{{input}}  OKです！</p>
        <p class="error"   v-if="!validationInput" v-transition="input">入力値：{{input}}  ダメです！</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

/* style.css */
@charset "UTF-8"; 
.success {
    color: green;
}
.error {
    color: red;
}

/* v-transitionでは以下のスタイルが適用される */
.input-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
.input-enter, .input-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

// index.js
new Vue({
    el: '#transition-demo',
    data: {
        input: '',
        validationInput: false
    },
    filters: {
        validator: function(value) {
            if (value.length > 4) {
                this.validationInput = true;
            } else {
                this.validationInput = false;
            }
            return value;
        }
    }
});


入力されたinputが、4桁以下ならvalidationInputをfalseにする。
すると、v-ifがfalseになる「OKです！」が非表示になり、「ダメです！」が表示される。


入力されたinputが、5桁以上になると、validationInputがtrueになる。
すると、v-ifがtrueになる「OKです！」が表示され、「ダメです！」が非表示になる。

このとき、「OKです！」には.enter（今回の場合は、.input-enter）が適用される。
反対に「ダメです！」には.leave（今回の場合は、.input-leave）が適用される。


また、入力されたinputが4桁以下になると、validationInputがfalseになる。
そして、「OKです！」が非表示になり、「ダメです！」が表示される。

このとき、「OKです！」には.leave、「ダメです！」には.enterが適用される。


ちなみにvalidationInputの変更は、filtersで行っている。


長くなったけど、v-transitionはDOM要素を表示・非表示にするとき、対応するCSSを適用させたり、JavaScriptのイベント（正確には違うけど）を実行したりできるという機能。



参考サイト





以上

written by @bc_rikko
時刻:
Labels: , ,

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )