Q&A
Closed
Nuxtで作られたwebアプリに、ネイティブアプリのようなsplash screen（アプリを開いて最初の１、2秒だけ表示される画像）のような動作を実現させたいです！！
色々と調べてみたのですが良い方法が見つかりませんでした。。。
要点
①ローディング画面ではない
②サイトを最初に開いた時に毎回１、2秒ほど画面全体に画像を表示させたい。
③ transitionを効かせてふんわりとfade inとfade out
default.vueの<Nuxt>タグを表示させる前に、setTimeoutか何かでできないかな〜？と考えておりますが、、どう実装すれば良いでしょうか？？？
よろしくお願いします！！
👆こちらを参考に実現することができました！
default.vue
<template>
<div class="wrapper">
<LoadingScreen :isLoading="isLoading" />
<transition name="fade" v-if="!isLoading">
<Nuxt />
</transition>
</div>
</template>
<script>
const LoadingScreen = () => import("../components/LoadingScreen.vue");
export default {
components: {
LoadingScreen,
},
data() {
return {
isLoading: true,
};
},
mounted() {
setTimeout(() => {
this.isLoading = false;
}, 1000);
},
};
</script>
LoadingScreen.vue
<template>
<div :class="{ loader: true, fadeout: !isLoading }">
<div>
<img class="splash" src="@/assets/images/type/main_type1.png" />
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "LoadingScreen",
props: ["isLoading"],
});
</script>
<style scoped>
.loader {
background-color: #ffffff;
bottom: 0;
color: white;
display: block;
font-size: 32px;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.splash {
width: 100%;
}
.fadeout {
animation: fadeout 2s forwards;
}
@keyframes fadeout {
to {
opacity: 0;
visibility: hidden;
}
}
</style>