ブラウザの横幅を変更した時に起こるCSSアニメーションを発生させたくない

前提・実現したいこと

レスポンシブなドロワーメニューを自作しています。
横幅が601px以上だと、ナビがヘッダーに表示され、
横幅が600px以下だと、ナビが消え、ハンバーガーメニューが表示されます。
ハンバーガーメニューをクリックすると横からナビがスライドして現れる仕様です。ここまでは上手く行きました。

実現したいことは、ブラウザを600px以下にした時に一度起きるスライドのアニメーションを実行させたくないことです。

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

問題はブラウザの横幅を縮めて600px以下になった時に、
一度スライドのアニメーションが発生してしまうことです。

恐らくcssの@media screen and (max-width: 600px) {の中で.header__navに対してtransition: 0.7s;を設定しているため、
ブラウザを600px以下になった時に一度スライドのアニメーションが発生してしまうのではないかと思います。しかしこの記述を消してしまうと、ハンバーガーメニューをクリックしてもアニメーションが発生しない状況になってしまいます。

.header__navのtransition: 0.7s;を消して、ハンバーガーメニューをクリックした時に、.header__navに付くクラス名.header__nav__actionに対してtransition: 0.7s;を設定した場合、ブラウザを600px以下にしてもアニメーションは発生しないのですが、今度はハンバーガーメニューをクリックした際のスライドのアニメーションがオープンの時にのみ適用されるようになります。クローズの時には適用されません。
手詰まりの状態ですので、ご回答いただけると幸いです。

https://jsfiddle.net/ululami/2gawt76r/3/
jsfiddleの方にコードをアップしましたので、動作の確認などにご活用ください。
ご返答よろしくお願い致します。

該当のソースコード

html
1<div class="wrapper">
2  <header class="header">
3    <div class="header__inner">
4      <h1 class="header__logo">
5        logo
6      </h1>
7      
8      <div class="humberger">
9        <span></span>
10        <span></span>
11        <span></span>
12      </div>
13      
14      <nav class="header__nav">
15        <ul class="header__nav__list">
16          <li>nav1</li>
17          <li>nav2</li>
18          <li>nav3</li>
19          <li>nav4</li>
20        </ul>
21      </nav>
22    </div>
23  </header>
24</div>

css
1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7html,body{
8  height: 100%;
9}
10
11.wrapper {
12  width: 100%;
13  height: 100%;
14  background: linen;
15}
16
17.header {
18  background: tomato;
19}
20
21.header__inner {
22  width: 600px;
23  margin: 0 auto;
24  padding: 10px 20px;
25  display: flex;
26  align-items: center;
27  justify-content: space-between;
28}
29
30.header__nav__list {
31  list-style: none;
32  display: flex;
33}
34
35.header__nav__list li:not(:last-child) {
36  margin-right: 80px;
37}
38
39@media screen and (max-width: 600px) {
40  
41  .humberger{
42    width: 30px;
43    height: 20px;
44    position: relative;
45    cursor: pointer;
46    z-index: 2;
47  }
48  
49  .humberger span {
50    position: absolute;
51    left: 0;
52    width: 100%;
53    height: 2px;
54    background: #000;
55  }
56  
57  .humberger span:nth-of-type(1) {
58    top: 0;
59  }
60  
61  .humberger span:nth-of-type(2) {
62    top: 50%;
63    transform: translateY(-50%);
64  }
65  
66  .humberger span:nth-of-type(3) {
67    bottom: 0;
68  }
69  
70  .header__inner {
71    width: 100%;
72  }
73  
74  .header__nav {
75    position: fixed;
76    display: flex;
77    align-items: center;
78    justify-content: center;
79    width: 50%;
80    height: 100%;
81    background: #fff;
82    top: 0;
83    right: 0;
84    z-index: 1;
85    transform: translateX(100%);
86    transition: 0.7s;
87  }
88  
89  .header__nav__action {
90    transform: translateX(0);
91  }
92  
93  .header__nav__list {
94    flex-direction: column;
95  }
96  
97  .header__nav__list li:not(:last-child) {
98    margin-right: 0;
99    margin-bottom: 20px;
100  }
101  
102}

javascript
1$(function(){
2  $('.humberger').on('click', function(){
3    $('.header__nav').toggleClass('header__nav__action');
4  });
5});

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

jQurey 3.3.1

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

回答1件

ベストアンサー

<nav>をtransition:0;で移動させて，メニュー開閉のアニメーションは<ul>にさせました ![gif](1eb4e9a331b613341b146e5af0e6a81e.gif) （画像が見切れている場合は画面幅を広くして閲覧してください．仕様のようです）

css
1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7html,body{
8  height: 100%;
9}
10
11.wrapper {
12  width: 100%;
13  height: 100%;
14  background: linen;
15}
16
17.header {
18  background: tomato;
19}
20
21.header__inner {
22  width: 600px;
23  margin: 0 auto;
24  padding: 10px 20px;
25  display: flex;
26  align-items: center;
27  justify-content: space-between;
28}
29
30.header__nav__list {
31  list-style: none;
32  display: flex;
33}
34
35.header__nav__list li:not(:last-child) {
36  margin-right: 80px;
37}
38
39@media screen and (max-width: 600px) {
40  
41  .humberger{
42    width: 30px;
43    height: 20px;
44    position: relative;
45    cursor: pointer;
46    z-index: 2;
47  }
48  
49  .humberger span {
50    position: absolute;
51    left: 0;
52    width: 100%;
53    height: 2px;
54    background: #000;
55  }
56  
57  .humberger span:nth-of-type(1) {
58    top: 0;
59  }
60  
61  .humberger span:nth-of-type(2) {
62    top: 50%;
63    transform: translateY(-50%);
64  }
65  
66  .humberger span:nth-of-type(3) {
67    bottom: 0;
68  }
69  
70  .header__inner {
71    width: 100%;
72  }
73  
74  .header__nav {
75    position: fixed;
76    /*display: flex;
77    align-items: center;
78    justify-content: center;*/
79    display: block;
80    /*width: 50%;*/width: 50vw;
81    /*height: 100%;*/height: 100vh;
82    /*background: #fff;*/
83    top: 0;
84    /*right: 0;*/left: 100%;
85    z-index: 1;
86    /*transform: translateX(100%);*/
87    /*transition: 0.7s;*/
88  }
89  /*
90  .header__nav__action {
91    transform: translateX(0);
92  }
93  */
94  
95  .header__nav__list {
96    flex-direction: column;
97    /*added*/
98    display: flex;
99    align-items: center;
100    justify-content: center;
101    background: #fff;
102    width: 100%;
103    height: 100%;
104    transition: .7s;
105    transform: translateX(0);
106  }
107  /*added*/
108  .header__nav__list__action {
109    transform: translateX(-100%);
110  }
111  
112  .header__nav__list li:not(:last-child) {
113    margin-right: 0;
114    margin-bottom: 20px;
115  }
116  
117}

jQuery
1$(function(){
2  $('.humberger').on('click', function(){
3    //$('.header__nav').toggleClass('header__nav__action');
4    $('.header__nav__list').toggleClass('header__nav__list__action');
5  });
6});

もとのコードも残してあるので，コメントアウトされてる箇所と追加されている箇所を見比べてみてください

投稿2018/08/16 10:53

編集2018/08/16 11:01