点击按钮实现页面滑动展示效果

点击“点我，去看文章2”，会出现文章2页面模板向左滑动效果

点击“点我，去看文章1”，会出现文章1页面模板向右滑动效果

<style type="text/css">
	#wrapper{
			width: 100%;
			overflow: hidden;
		}
		.articleCon{
			width: 200%;
			display: flex;
		}
		.article1,
		.article2{
			width: 100%;
			height: 400px;
		}
		.article1{
			background: blue;
		}
		.article2{
			background: cyan;
		}
</style>

<div id="wrapper">
	<div class="articleCon">
		<div class="article1">
			<button type="button" id="viewArticle2">展示文章2</button>
			<div>
				hello，我是文章1
			</div>
		</div>
		<div class="article2">
			<button type="button" id="viewArticle1">展示文章1</button>
			<div>
				hello，我是文章2
			</div>
		</div>
	</div>
</div>

<script src="./assets/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("#viewArticle2").click(function(){
		$(".articleCon").css({
			"margin-left":"-100%",
			"transition":"all 2s"
		})
	})
	$("#viewArticle1").click(function(){
		$(".articleCon").css({
			"margin-left":"0%",
			"transition":"all 2s"
		})
	})
</script>