ナビゲーションメニューのtransitionがかからない

タイトルの通り、ナビゲーションメニューがかかりません。
かからない部分は.nav.nav-openの記述のとこだけです。ハンバーガーメニューのところなどはtransitionが効いています。
一応流れとして、
1 .nav部分全体をdisplay:noneとしておく。
2 ハンバーガーメニューである.btnをクリックするとtoggleClassによって.nav-openがつく。
3 .nav.nav-openにtransitionの指定。
このように考えています。

jQueryの方の指定でもdurationやメソッドチェーンとしてshow,slowなど試してはいるのですがこちらもイマイチうまくいきません。

また、今現在、関係ないところにも試しでtransitionをかけており、散らかっている状態です。
申し訳ありませんが、自己解決できそうにないので教えていただけると助かります。
よろしくお願い致します。

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<meta http-equiv="X-UA-Compatible" content="IE=edge">
6	<meta name="viewport" content="width=device-width">
7	<title>humberger menu2</title>
8	<link rel="stylesheet" href="css/style.css">
9  <link rel="stylesheet" href="css/reset.css">
10  <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet">
11
12</head>
13<body>
14<div id="container">
15<header id="gnav">
16	<h1>Grid</h1>
17	 <p class="btn"><span></span><span></span><span></span></p>
18</header>
19
20	<nav class="nav">
21	<ul class="navG navG01">
22		<li><a href="#">menu01</a></li>
23		<li><a href="#">menu02</a></li>
24		<li><a href="#">menu03</a></li>
25		<li><a href="#">menu04</a></li>
26		<li><a href="#">menu05</a></li>
27	</ul>
28
29  <ul class="navG navG02">
30		<li><a href="#">menu01</a></li>
31		<li><a href="#">menu02</a></li>
32		<li><a href="#">menu03</a></li>
33		<li><a href="#">menu04</a></li>
34		<li><a href="#">menu05</a></li>
35	</ul>
36 </nav>
37 <!--/.nav-->
38
39
40<div class="main">
41<article class="main-pic">
42<a href="#">
43	<figure><img src="https://placehold.jp/200x124.png" alt=""></figure>
44</a>
45</article>
46<!-- /.main -->
47</div>
48<!-- /.main -->
49
50</div>
51<!-- /#container -->
52
53<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
54
55<script>
56
57$(function() {
58    $(".btn").on("click", function(){
59    $("ul").toggleClass("show");
60    $(".btn").toggleClass("acc_open");
61    $(".body-hum").toggleClass("body-bg");
62		$(".nav").toggleClass("nav-open");
63    return false;
64});
65});
66</script>
67</body>
68</html>
69

css
1@charset "utf-8";
2
3/*reset*/
4
5body {
6    font-size: 62.5%;
7    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
8}
9
10* {
11    margin: 0;
12    padding: 0;
13    list-style: none;
14    -webkit-box-sizing: border-box;
15    -moz-box-sizing: border-box;
16    box-sizing: border-box;
17}
18
19
20/*font-size*/
21
22html {
23    font-size: 62.5%;
24}
25
26
27/* =10px */
28
29body {
30    font-size: 16px;
31    font-size: 1.6rem;
32}
33
34
35/* =16px */
36
37h1 {
38    font-size: 32px;
39    font-size: 3.2rem;
40}
41
42h2 {
43    font-size: 24px;
44    font-size: 2.4rem;
45}
46
47h3 {
48    font-size: 20px;
49    font-size: 2.0rem;
50}
51
52h4 {
53    font-size: 18px;
54    font-size: 1.8rem;
55}
56
57p, ul, ol, li, a, dl, dt, dd {
58    font-size: 16px;
59    font-size: 1.6rem;
60}
61
62a {
63    text-decoration: none;
64}
65
66
67/*コンテンツ
68---------------------------------------*/
69
70#container {
71    overflow: hidden;
72    width: 90%;
73    margin: 0 auto;
74}
75
76#gnav {
77    background: lightgreen;
78}
79
80#gnav::after {
81    display: block;
82    clear: both;
83    content: '';
84}
85
86h1 {
87    width: 85%;
88    float: left;
89    min-height: 45px;
90    line-height: 45px;
91    font-size: 2.4rem;
92    font-family: 'Rubik Mono One', sans-serif;
93}
94
95p.btn {
96    width: 15%;
97    float: right;
98    min-height: 45px;
99    max-width: 50px;
100    position: relative;
101}
102
103p.btn:before {
104    content: 'Menu';
105    position: absolute;
106    top: 14px;
107    right: 45px;
108    font-size: 15px;
109    font-size: 1.5rem;
110    line-height: 1.1;
111    font-weight: bold;
112    z-index: 2;
113}
114
115.nav {
116    display: none;
117    width: 100%;
118    transition: 0.5s;
119    position: absolute;
120    top: 45px;
121    left: 0;
122    -webkit-transition: .3s;
123    -o-transition: .3s;
124    transition: 1s;
125}
126
127.nav.nav-open {
128    display: block;
129    -webkit-transition: all 0.5s ease-out;
130    -moz-transition: all 0.5s ease-out;
131    -ms-transition: all 0.5s ease-out;
132    -o-transition: all 0.5s ease-out;
133    transition: all 0.5s ease-out;
134}
135
136.navG.show {
137    margin-left: 0;
138}
139
140ul.navG::after {
141    display: block;
142    content: '';
143    clear: both;
144}
145
146ul.navG {
147    width: 100%;
148}
149
150ul.navG02 {
151    margin-top: 30px;
152}
153
154ul.navG li {
155    height: 40px;
156    text-align: center;
157    background: rgba(0, 0, 0, .3);
158    border-bottom: 1px solid #fff;
159}
160
161ul.navG li:last-child {
162    border-bottom: none;
163}
164
165ul.navG li a {
166    display: block;
167    line-height: 40px;
168    color: #fff;
169    font-size: 15px;
170}
171
172p span {
173    background: #fff;
174    display: block;
175    width: 60%;
176    height: 3px;
177    max-width: 30px;
178    position: absolute;
179    top: 0;
180    left: 0;
181    right: 0;
182    bottom: 0;
183    margin: 0 auto;
184    -webkit-transition: all 0.5s ease-out;
185    -moz-transition: all 0.5s ease-out;
186    -ms-transition: all 0.5s ease-out;
187    -o-transition: all 0.5s ease-out;
188    transition: all 0.5s ease-out;
189}
190
191p>span:first-child {
192    top: 26%;
193}
194
195p>span:nth-child(2) {
196    top: 45%;
197}
198
199p>span:nth-child(3) {
200    top: 62%;
201}
202
203.acc_open>span:nth-child(2) {
204    opacity: 0;
205}
206
207.acc_open>span:first-child {
208    top: 45%;
209    -webkit-transform: rotate(225deg);
210    -moz-transform: rotate(225deg);
211    -ms-transform: rotate(225deg);
212    -o-transform: rotate(225deg);
213    transform: rotate(225deg);
214}
215
216.acc_open>span:nth-child(3) {
217    top: 45%;
218    -webkit-transform: rotate(-225deg);
219    -moz-transform: rotate(-225deg);
220    -ms-transform: rotate(-225deg);
221    -o-transform: rotate(-225deg);
222    transform: rotate(-225deg);
223}
224

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

回答2件

ベストアンサー

roronoazoroさん、こんにちは。
提示していただいているコード内で動くだけのものにはなりますが、
作成してみました。

HTML

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>humberger menu2</title>
    <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/reset.css">
  <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet">

</head>
<body>
<div id="container">
<header id="gnav">
    <h1>Grid</h1>
     <p class="btn"><span></span><span></span><span></span></p>
</header>

    <nav class="nav nav-close">
    <ul class="navG navG01">
        <li><a href="#">menu01</a></li>
        <li><a href="#">menu02</a></li>
        <li><a href="#">menu03</a></li>
        <li><a href="#">menu04</a></li>
        <li><a href="#">menu05</a></li>
    </ul>

  <ul class="navG navG02">
        <li><a href="#">menu01</a></li>
        <li><a href="#">menu02</a></li>
        <li><a href="#">menu03</a></li>
        <li><a href="#">menu04</a></li>
        <li><a href="#">menu05</a></li>
    </ul>
 </nav>
 <!--/.nav-->


<div class="main">
<article class="main-pic">
<a href="#">
    <figure><img src="https://placehold.jp/200x124.png" alt=""></figure>
</a>
</article>
<!-- /.main -->
</div>
<!-- /.main -->

</div>
<!-- /#container -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

$(function() {
    $(".btn").on("click", function(){
    $("ul").toggleClass("show");
    $(".btn").toggleClass("acc_open");
    $(".body-hum").toggleClass("body-bg");
 
    if($(".nav").hasClass("nav-open")){
      $(".nav").removeClass("nav-open");
      $(".nav").addClass("nav-close");
    }else{
	    $(".nav").removeClass("nav-close");      
	    $(".nav").addClass("nav-open");
    }
      
    return false;
});
});
</script>
</body>
</html>

CSS

@charset "utf-8";

/*reset*/

body {
    font-size: 62.5%;
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/*font-size*/

html {
    font-size: 62.5%;
}


/* =10px */

body {
    font-size: 16px;
    font-size: 1.6rem;
}


/* =16px */

h1 {
    font-size: 32px;
    font-size: 3.2rem;
}

h2 {
    font-size: 24px;
    font-size: 2.4rem;
}

h3 {
    font-size: 20px;
    font-size: 2.0rem;
}

h4 {
    font-size: 18px;
    font-size: 1.8rem;
}

p, ul, ol, li, a, dl, dt, dd {
    font-size: 16px;
    font-size: 1.6rem;
}

a {
    text-decoration: none;
}


/*コンテンツ
---------------------------------------*/

#container {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
}

#gnav {
    background: lightgreen;
}

#gnav::after {
    display: block;
    clear: both;
    content: '';
}

h1 {
    width: 85%;
    float: left;
    min-height: 45px;
    line-height: 45px;
    font-size: 2.4rem;
    font-family: 'Rubik Mono One', sans-serif;
}

p.btn {
    width: 15%;
    float: right;
    min-height: 45px;
    max-width: 50px;
    position: relative;
}

p.btn:before {
    content: 'Menu';
    position: absolute;
    top: 14px;
    right: 45px;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: bold;
    z-index: 2;
}

.nav {
    width: 100%;
    position: absolute;
    top: 45px;
    left: 0;
}

.nav.nav-close{
    opacity:0;
    transform:translateY(-100vh);
    transform-origin:top center;

    transition: 0.5s;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: 1s;
  
    animation: navAnime 1s ease;
}

.nav.nav-open {
    display:block;
    opacity:1;
  
    transform:translateY(0);
    transform-origin:top center;
  
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
  
   animation: navAnimes 1s ease;
}

@keyframes navAnime{
  0%{
      opacity:1;
  }  
  
  100%{
      opacity:0;
  }
}

@keyframes navAnimes{
  0%{
      opacity:0;
  }  
  
  100%{
      opacity:1;
  }
}

.navG.show {
    margin-left: 0;
}

ul.navG::after {
    display: block;
    content: '';
    clear: both;
}

ul.navG {
    width: 100%;
}

ul.navG02 {
    margin-top: 30px;
}

ul.navG li {
    height: 40px;
    text-align: center;
    background: rgba(0, 0, 0, .3);
    border-bottom: 1px solid #fff;
}

ul.navG li:last-child {
    border-bottom: none;
}

ul.navG li a {
    display: block;
    line-height: 40px;
    color: #fff;
    font-size: 15px;
}

p span {
    background: #fff;
    display: block;
    width: 60%;
    height: 3px;
    max-width: 30px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

p>span:first-child {
    top: 26%;
}

p>span:nth-child(2) {
    top: 45%;
}

p>span:nth-child(3) {
    top: 62%;
}

.acc_open>span:nth-child(2) {
    opacity: 0;
}

.acc_open>span:first-child {
    top: 45%;
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);
}

.acc_open>span:nth-child(3) {
    top: 45%;
    -webkit-transform: rotate(-225deg);
    -moz-transform: rotate(-225deg);
    -ms-transform: rotate(-225deg);
    -o-transform: rotate(-225deg);
    transform: rotate(-225deg);
}

JqueryでFadeIn、FadeOutのような動きが表現したいのかなと思ったので、
cssのanimationとtransformを使って動かしてます。
JSも少し変更してありますので、併せてご確認ください。

参考になれば幸いです。

投稿2017/04/21 02:24