オープニングアニメーションを実装するとコンテンツをクリック出来なくなる

質問失礼致します。

前提・実現したいこと

オープニングアニメーションを実装した上でメニューバーなどの内容をクリックできるようにしたい

発生している問題・エラーメッセージ

現在オープニングアニメーションをつけているのですが、position:fixedにするとメニューバーのコンテンツをクリック出来ない状態となっております。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link href="https://fonts.googleapis.com/css2?family=Paytone+One&display=swap" rel="stylesheet">
7  <link rel ="stylesheet" href="css/styles.css">
8  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,300&display=swap" rel="stylesheet">
9  <script src="https://kit.fontawesome.com/880ee7ee43.js" crossorigin="anonymous"></script>
10  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
11  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x166.png">
12    <!-- <link rel ="stylesheet" href="css/grid-guide.css"> -->
13  
14  <title>blog</title>
15
16</head>
17<body>
18  <div id="loadingWrap">
19    <div id="loading"></div>
20</div>
21    
22  <div class ="box1">
23    <div class="site">
24      <h1><a href="#">blog</a></h1>
25    </div>
26  </div>
27  <div class ="box2">
28    <nav class ="menu">
29      <ul>
30        <li><a href="#">CODE</a></li>
31        <li><a href="#">LIFE</a></li>
32        <li><a href="#">WORK</a></li>
33        <li><a href="#">DESIGN</a></li>
34        <li><a href="#">CONTACT</a></li>
35      </ul>
36    </nav>
37  </div>
38  <script src="js/main.js"></script>
39</body>
40</html>

CSS
1@charset "UTF-8";
2
3body{
4  font-family: 'メイリオ','Hiragino Kaku Gothic Pro',sans-serif;
5
6}
7
8#loadingWrap {
9  width: 100%;
10  height: 100vh;
11  background: #000;
12  position: fixed;
13  top: 0;
14  left: 0;
15  z-index: ;
16}
17      
18#loading {
19  width: 5em;
20  height: 5em;
21  border-top: 1em solid rgba(255, 255, 255, 0.2);
22  border-right: 1em solid rgba(255, 255, 255, 0.2);
23  border-bottom: 1em solid rgba(255, 255, 255, 0.2);
24  border-left: 1em solid rgba(255, 255, 255, 1);
25  animation: loaderAnime 1s infinite linear;
26  border-radius: 50%;
27  position: fixed;
28  top: 0;
29  right: 0;
30  bottom: 0;
31  left: 0;
32  margin: auto;
33  z-index:;
34}
35      
36@keyframes loaderAnime {
37  0% {
38      transform: rotate(0deg);
39  }
40  100% {
41      transform: rotate(360deg);
42  }
43}
44      
45.loadingNone {
46  animation: loadingAnime 2s forwards;
47}
48      
49@keyframes loadingAnime {
50  0% {
51      opacity: 100;
52  }
53  60% {
54      opacity: 10;
55  }
56  100% {
57      opacity: 0;
58      display: none;
59  }
60}
61
62/* サイト名 */
63.site h1 a{
64  color:#000;
65  text-decoration: none;
66}
67
68.site h1{
69  margin: 0;
70  font-size: 30px;
71  font-family: 'Roboto Condensed', sans-serif;
72  font-weight: normal;
73}
74
75/* ナビゲーション */
76
77
78.menu ul{
79  margin: 10px;
80  padding: 0;
81  list-style: none;
82}
83
84.menu li a{
85  display: block;
86  padding: 10px;
87  color:#fff;
88  font-size: 14px;
89  text-decoration: none;
90}
91
92.menu li a:hover{
93opacity: 0.8;
94}
95
96.menu ul:after{
97  content: "";
98  display: block;
99  clear:both;
100}
101
102.menu li{
103  float: left;
104  width: auto;
105}
106/* BOX2をバーの形にする */
107.box2{
108  background-color:#000 ;
109}

Javascript
1const loadingWrap = document.getElementById('loadingWrap');
2window.addEventListener('load', function() {
3    loadingWrap.classList.add('loadingNone');
4});

試したこと

・オープニングアニメーションのタグにz-indexでマイナスをつけた→画像などが浮かび上がってしまう
・以下のコードをの手前に持ってきた→特に状況変わらず

 <div id="loadingWrap">
        <div id="loading"></div>
    </div>

重なり順かと思いますのでz-indexが関係していると思うのですが。。
初歩的な質問で申し訳ありませんが宜しくお願い致します。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

@keyframes loadingAnimeの100%の個所
display:none;ではなくvisibility:hidden;を。

jsを使っているならできれば
jsで制御させてあげたほうが良いかもしれません。

投稿2020/07/20 12:44

wing283

総合スコア123

mikeikeikename

2020/07/20 13:11

解決致しました。ありがとうございます。 jsで制御させてあげたほうが良いかもしれません。＞＞こちら差し支えなければJsで制御するメリットを教えていただけないでしょうか。

wing283

2020/07/20 13:26

visibility:hidden;は存在するけど見えない扱い display:none;はその場にない扱いになるので、開発者モードでみると確かにそこに存在してしまいます。常にくるくる回ってしまっているので、ページ内の量が多くなればなるほど読み込み速度も長くなる可能性があります。気にしないならいいかもしれませんが。。。

mikeikeikename

2020/07/20 13:39

なるほど確かに。。。大変勉強になりました。ありがとうございます。

行動規範の内容に同意します