【vue】Vueのコンポーネントを読み込んだタイミングでローディング画面をfadeoutする方法

Question

最初はローディング画面を出しておいて、リソースを全て読み終えたらフェードアウトして中身のコンテンツを表示させると言うのをやりたいです。

実行した結果

一瞬で、ローディング画面が消えてしまいフェードが実行されません。

ソースコード

vueで最初に読むmain.jsでは下記のコンポーネントを読み込みます。
v-ifで、data.kvの値をみてリソースを削除します。
その際に、transitionの設定を使ってフェードさせます。

<template>
<div id="opning">
    <transition name="kv">
        <div v-if="! this.$data.kv" id="loading"></div>
    </transition>
    <div id="contents">
        <p>表示する要素</p>
    </div>
</div>
</template>

<script>
export default {
    name='opning',
    data() {
        return {
            kv: 0
        }
    },
    mounted() {
      // コンポーネントが作られたタイミング発火
      console.log('opning created');
      this.$data.opning_states.kv = 1
    }
}

</script>

<style>
#opning {
    width: 100%;
    height: 100%;
}

#loading {
    width: 100%;
    height: 100%;
    background-color: #FFF;
}
.kv_leave {
    opacity: 1;
}
.kv_leave-to {
    opacity: 0;
}
.kv_leave-active {
    transition: opacity .5s;
}
</style>

Answer 1

いくつか間違っている部分があるため、動かないようです。

<script>
export default {
    name='opning', // name: 'opning' です
    ...
    mounted() {
      // コンポーネントが作られたタイミング発火
      console.log('opning created');
      this.$data.opning_states.kv = 1 // opning_statesが存在しません
    }

}
</script>
<style>
#opning {
    width: 100%;
    height: 100%;
}

#loading {
    width: 100%;
    height: 100%;
    background-color: #FFF;
}

/*
以下、命名規則が違います。
Vueの<transition>コンポーネントに関わるCSSクラスは、`[name]-leave`などで、アンダーバーではなくハイフンでつなぎます。
*/

.kv_leave {
    opacity: 1;
}
.kv_leave-to {
    opacity: 0;
}
.kv_leave-active {
    transition: opacity .5s;
}
</style>

補足

問題の解決とは別ですが、念のため書きます。

Vueコンポーネントのデータオブジェクトの各プロパティは、this.kvのように設定されるので、this.$data経由でなくて直接参照できます。
ただし、この動作は「$」「_」で始まるプロパティ名には適用されません。Vueが自動生成するプロパティ名とかぶる危険性があるためです。例えば、$dataであればthis.$data.$dataでないとアクセスできません。

また、テンプレート内では、コンポーネントインスタンスが文脈として設定されます。
そのためthisは省略でき、以下は同じ意味になります。
<div v-if="! this.$data.kv"></div>
<div v-if="! $data.kv"></div>
<div v-if="! kv"></div>

Comments

[hasshy]

ご回答いただきありがとうございます！
お日にちが空いてしまい申し訳ございません。
また、添削までしていただきありがとうございました。
抜けていた箇所がわかり参考になります。

補足の件も承知しました。
省略の規則がわからないところもあり、$dataから書いていましたが省略出来そうです。

ありがとうございました。