ページ読み込み時のkeyframe動作

スマホメニューを作成しています。
keyframeで表示非表示を指定しているのですが、menu_offの指定がページ読み込み時に動作してしまうため、一瞬メニューが画面に表示されてしまいます。
解決策がありましたらご教示いただければと思います。
何卒よろしくお願いいたします。

html
1<body>
2  <div class="button_menu"></div>
3  <section class="menu_sp">
4    <div>コンテンツ</div>
5  </section>
6</body>

css
1body {
2  width:100vw;
3  min-height:100vh;
4  background:gray;
5}
6.menu_sp {
7  width: 100vw;
8  height: 100vh;
9  background: rgba(255,255,255,.97) ;
10  display: -webkit-flex; display: flex;
11  -webkit-flex-wrap: wrap; flex-wrap: wrap;
12  -webkit-flex-direction: column; flex-direction: column;
13  -webkit-align-items: center; align-items: center;
14  -webkit-justify-content: center; justify-content: center;
15  position: fixed;
16  top: 0;
17  left: 0;
18  z-index: -99;
19  animation: menu_off .5s ease forwards;
20}
21.menu_on .menu_sp {
22  animation: menu_on .5s ease forwards;
23}
24@keyframes menu_on {
25  0% {
26    opacity: 0;
27    z-index: 99;
28  }
29  100% {
30    opacity: 1;
31    z-index: 99;
32  }
33}
34@keyframes menu_off {
35  0% {
36    opacity: 1;
37    z-index: 99;
38  }
39  99% {
40    z-index: 99;
41    opacity: 0;
42  }
43  100% {
44    z-index: -99;
45    opacity: 0;
46  }
47}
48.button_menu {
49  cursor: pointer;
50  width: 20px;
51  height: 20px;
52  background: blue;
53  position: absolute;
54  top: 10px;
55  right: 10px;
56}

js
1    <script>
2      $(".button_menu").click(
3        function () {
4          $("body").toggleClass("menu_on");
5        }
6      );
7      $(".menu_sp").click(
8        function () {
9          $("body").toggleClass("menu_on");
10        }
11      );
12    </script>

kszk311

2018/05/25 08:18

HTMLのソースも追記してもらえますか。

hiroakitajima

2018/05/25 08:23

済みません抜けてました。修正しましたのでよろしくお願いいたします。

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

回答1件

ベストアンサー

「CSSのみで行いたい」などの制約がないのであれば、visibilityプロパティでページロード時のアニメーションが実行されている時間(今回は500ms)だけコンテンツ部分を不可視化しておき、アニメーションが終了する時間(500ms)以降にvisibilityプロパティで不可視にしたコンテンツ部分をjQueryで可視化することで、質問者さんの実現したい動作が得られると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        body {
13            width: 100vw;
14            min-height: 100vh;
15            background: gray;
16        }
17
18        .menu_sp {
19            width: 100vw;
20            height: 100vh;
21            background: rgba(255, 255, 255, .97);
22            display: flex;
23            flex-wrap: wrap;
24            flex-direction: column;
25            align-items: center;
26            justify-content: center;
27            position: fixed;
28            top: 0;
29            left: 0;
30            z-index: -99;
31            animation: menu_off .5s ease forwards;
32            visibility: hidden; /* 追記 */
33        }
34
35        .menu_on .menu_sp {
36            animation: menu_on .5s ease forwards;
37        }
38
39        .button_menu {
40            cursor: pointer;
41            width: 20px;
42            height: 20px;
43            background: blue;
44            position: absolute;
45            top: 10px;
46            right: 10px;
47        }
48
49        @keyframes menu_on {
50            0% {
51                opacity: 0;
52                z-index: 99;
53            }
54            100% {
55                opacity: 1;
56                z-index: 99;
57            }
58        }
59
60        @keyframes menu_off {
61            0% {
62                opacity: 1;
63                z-index: 99;
64            }
65            99% {
66                z-index: 99;
67                opacity: 0;
68            }
69            100% {
70                z-index: -99;
71                opacity: 0;
72            }
73        }
74    </style>
75</head>
76<body>
77<div class="button_menu"></div>
78<section class="menu_sp">
79    <div>コンテンツ</div>
80</section>
81<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
82<script>
83    $(function () { // 追記
84        setTimeout(function () {
85            $(".menu_sp").css({
86                visibility: "visible"
87            });
88        }, 500);
89    });
90    $(".button_menu").click(
91        function () {
92            $("body").toggleClass("menu_on");
93        }
94    );
95    $(".menu_sp").click(
96        function () {
97            $("body").toggleClass("menu_on");
98        }
99    );
100</script>
101</body>
102</html>