最初はローディング画面を出しておいて、リソースを全て読み終えたらフェードアウトして中身のコンテンツを表示させると言うのをやりたいです。
実行した結果
一瞬で、ローディング画面が消えてしまいフェードが実行されません。
ソースコード
vueで最初に読むmain.jsでは下記のコンポーネントを読み込みます。
v-ifで、data.kvの値をみてリソースを削除します。
その際に、transitionの設定を使ってフェードさせます。
vue
1<template> 2<div id="opning"> 3 <transition name="kv"> 4 <div v-if="! this.$data.kv" id="loading"></div> 5 </transition> 6 <div id="contents"> 7 <p>表示する要素</p> 8 </div> 9</div> 10</template> 11 12<script> 13export default { 14 name='opning', 15 data() { 16 return { 17 kv: 0 18 } 19 }, 20 mounted() { 21 // コンポーネントが作られたタイミング発火 22 console.log('opning created'); 23 this.$data.opning_states.kv = 1 24 } 25} 26 27</script> 28 29<style> 30#opning { 31 width: 100%; 32 height: 100%; 33} 34 35#loading { 36 width: 100%; 37 height: 100%; 38 background-color: #FFF; 39} 40.kv_leave { 41 opacity: 1; 42} 43.kv_leave-to { 44 opacity: 0; 45} 46.kv_leave-active { 47 transition: opacity .5s; 48} 49</style>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/16 05:21 編集