backgroundに指定しているtransitionがうまく効かない

###前提・実現したいこと
transitionを指定しているクラスを.toggleClass()で追加、削除して、
フルスクリーン表示している背景を、fadeIN＆fadeOutしているようにみせたい

###発生している問題・エラーメッセージ
.is-menuOpenというクラスを追加したときheaderをheight：100%にして
background: rgba(#f00, 1.0);をしているのですが、
backgroundに指定しているtransitionが、クラスを追加したときはうまくfadeINするの
ですが、クラスを削除したとき、fadeOutせずすぐに消えてしまいます。

###ソースコード

html
1<body id="top"><!-- body要素に.is-menuOpenというクラスを追加します -->
2<div id="container">
3<header id="header "class="header-full">
4	<div class="l-inner">
5		<h1 class="header-logo">
6			<a href="/"><img src="http://placehold.it/250x50" alt="サイトロゴ"></a>
7		</h1>
8		<span class="menu-button"><i></i></span>
9			<nav  class="nav-content">
10				<ul>
11					<li><a href="/">Home</a></li>
12					<li><a href="#">サービス</a></li>
13					<li><a href="#">実績</a></li>
14					<li><a href="#">会社概要</a></li>
15					<li><a href="#">採用情報</a></li>
16					<li><a href="#">お問い合わせ</a></li>
17				</ul>
18			</nav>
19	</div>
20</header>

scss
1
2.header-full {
3  height: auto;
4  padding: 0;
5  background: rgba(#f00, 0);
6  transition: background 1.0s linear;
7}
8.is-menuOpen {
9 overflow: hidden;
10 .header-full {
11   height: 100%;
12   background: rgba(#f00, 1.0);
13   z-index: 9999;
14 }
15}

javascript
1$(function() {
2    var showSpNav = function() {
3        var $target = $('body'),
4            $header = $('header'),
5            $menuButton = $(".menu-button"),
6            $navContent = $(".nav-content"),
7            winW = $(window).width(),
8            breakP = 1024,
9            menuOpen = 'is-menuOpen',
10            menuButtonOpen = 'is-open';
11        $menuButton.on("click", function() {
12            $target.toggleClass(menuOpen);
13            $header.toggleClass(menuButtonOpen);
14            if ($target.hasClass(menuOpen)) {
15                $navContent.fadeIn(1000);
16            } else {
17                $navContent.fadeOut(1000);
18            };
19        });
20        $(window).resize(function() {
21            if (winW != $(this).width()) {
22                if ($(this).width() > breakP) {
23                    $target.removeClass(menuOpen);
24                    $header.removeClass(menuButtonOpen);
25                    $navContent.show();
26                } else {
27                    if (!$target.hasClass(menuOpen)) {
28                        $navContent.hide();
29                    }
30                }
31            }
32            winW = $(this).width();
33        });
34    }
35
36    showSpNav()
37});