css와 js를 이용한 화면전환

display클래스를 넣어주고 빼주고를 사용하여 화면전환이 원활하게 일어나도록 수정
HTMLhead · Jan 10, 2019 · 6d621b5 · 6d621b5
1 parent be072e2
commit 6d621b5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/css/index.css b/css/index.css
@@ -78,9 +78,7 @@ header {
     transform:rotate(360deg);
   }
 }
-.container {
-  display:none;
-}
+
 .spinner{
   margin: auto;
   width: 100vw;
@@ -109,8 +107,6 @@ header {
   display:inline-block;
   width:50px;
   height:50px;
-  border:1px solid #fff;
-  border-radius:50%;
   background-image:url('../photo/soom-cutout.png');
   background-size:50px 50px; 
 }
@@ -127,4 +123,8 @@ header {
   color:#fff;
   margin-top:5vh;
   animation:blink 1s steps(2, start) infinite;
+}
+
+.display {
+  display:none;
 }
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 </head>
 
 <body>
-  <div class='spinner'>
+  <div class='spinner display'>
     <div class='spinner-animation'> 
       <div class='spinner-inner-circle-container'>
         <div class='spinner-inner-circle'></div>

diff --git a/js/common.js b/js/common.js
@@ -1,8 +1,14 @@
+//querySelector너무 길어요
+function qs(value) {
+  return document.querySelector(value)
+}
+const spinner = qs('.spinner')
+const conatiner = qs('.container')
 let fontLoadChecker = setInterval(() => {
-  console.log(document.fonts.status)
   if(document.fonts.status === 'loaded') {
     clearInterval(fontLoadChecker);
-    console.log('hihihihi')
+    spinner.classList.add('display')
+    conatiner.classList.remove('display')
   }
 },100)
 const app = new Vue({