JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <h3>.aside與.main皆加transition:.aside滑入滑回皆不會產生空白</h3>
	<div class="container">
		<div class="aside"></div>
		<div class="main">
			<div class="header"></div>
		</div>
	</div>
  <br>
  <h3>只有.main加transition:.aside滑回去會產生空白</h3>
  <div class="container1">
		<div class="aside1"></div>
		<div class="main1">
			<div class="header1"></div>
		</div>
	</div>
</body>

CSS

.container,.container1{
	position: relative;
}
.main{
	width: 100%;
	height: 300px;
	background:#414141;
	transition: all 3s ease;
	/*transition ease表示緩慢開始，中間變快，又慢慢結束*/
}
.main1{
	width: 100%;
	height: 300px;
	background:#414141;
	transition: all 3s ease;
	/*transition ease表示緩慢開始，中間變快，又慢慢結束*/
}
.main .header,.main1 .header1{
	height: 50px;
	background:#9dd3a8;
}
.aside{
	width: 270px;
	background: #fff1c1;
	position: absolute;
	top:0;
	bottom: 0;
	transform: translateX(-270px);/*讓aside往左移270隱藏在畫面中*/
	overflow: hidden;
	transition: all 3s ease;
}
.aside1{
	width: 270px;
	background: #fff1c1;
	position: absolute;
	top:0;
	bottom: 0;
	transform: translateX(-270px);/*讓aside往左移270隱藏在畫面中*/
	overflow: hidden;
}
.open .main,.open1 .main1{
	transform:translateX(270px);
}
.open .aside,.open1 .aside1{
	transform:translateX(0px);
}

JavaScript

$(document).ready(function() {
//.container部分
	$('.header').click(function(event) {
		$('body').toggleClass('open');
	});
  //.container1部分
  	$('.header1').click(function(event) {
		$('body').toggleClass('open1');
	});
});