javascript 20180507アニメーションで淡出，淡出（ハンバーガー）

Posted 2021-05-03

/* -----------------------------------------------------------
	hamburger
----------------------------------------------------------- */
.hamburger {
	position: fixed;
	top: 7%;
	left: 25px;
	display: block;
	width: 24px;
	height: 24px;
	z-index: 99999;
	box-sizing: border-box;
	span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #fff;
		margin: 0 auto;
		&:nth-of-type(1) {
			top: 0;
		}
		&:nth-of-type(2) {
			top: 9px;
		}
		&:nth-of-type(3) {
			bottom: 0;
		}
	}
}

/*----------ナビゲーション----------*/
#navigation {
	position: fixed;
	display: none;
	width: 100%;
	height: 100vh;
	top: 0;
	@include cV(left,75px,60px,50px);
	background: $gray_d;
	z-index: 99998;
	.navigation_inner {
		display: table;
		width: 100%;
		height: 100%;
		.navigation_menu {
			display: table-cell;
			vertical-align: middle;
			.navigation_item {
				opacity: 0;
				width: 300px;
				height: 40px;
				margin: 16px auto 0 auto;
				&:first-child {
					margin-top: 0;
				}
				a {
					display: block;
					position: relative;
					text-decoration: none;
					font-size: 2.4rem;
					color: #fff;
					line-height: 40px;
					text-align: center;
				}
			}
		}
	}
	&.active {
		.navigation_inner {
			.navigation_menu {
				.navigation_item {
					&:nth-child(1) {
						animation: humb_in .8s ease-out .5s 1 forwards;
					}
					&:nth-child(2) {
						animation: humb_in .8s ease-out .6s 1 forwards;
					}
					&:nth-child(3) {
						animation: humb_in .8s ease-out .7s 1 forwards;
					}
				}
			}
		}
	}
	&.no_active {
		.navigation_inner {
			.navigation_menu {
				.navigation_item {
					opacity: 1;
					&:nth-child(1) {
						animation: humb_out .8s ease-out .1s 1 forwards;
					}
					&:nth-child(2) {
						animation: humb_out .8s ease-out .1s 1 forwards;
					}
					&:nth-child(3) {
						animation: humb_out .8s ease-out .1s 1 forwards;
					}
				}
			}
		}
	}
}

@keyframes humb_in {
	0% {
		opacity: 0;
	}
	50% {
		opacity: .5;
	}
	100% {
		opacity: 1;
	}
}
@keyframes humb_out {
	0% {
		opacity: 1;
	}
	25% {
		opacity: .5;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

<div class="hamburger">
	<span></span>
	<span></span>
	<span></span>
</div>

<div id="navigation">
	<div class="navigation_inner">
		<ul class="navigation_menu">
			<li class="navigation_item"><a href="#">MENU 01</a></li>
			<li class="navigation_item"><a href="demo02.html">MENU 02</a></li>
			<li class="navigation_item"><a href="demo03.html">MENU 03</a></li>
		</ul>
	</div>
</div>

jQuery('.hamburger').on('click', function(){
	jQuery('#navigation').animate({width: 'toggle'}, 600);
	if($('#navigation').hasClass('active')) {
		$('#navigation').removeClass('active');
		$('#navigation').addClass('no_active');
	} else {
		$('#navigation').addClass('active');
		$('#navigation').removeClass('no_active');
	}
});