drawer 弹框滑出

# drawer 弹框滑出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			html,body{
				height:100%
			}
			#mask1{
				width:100px;
				height:100%;
				background:lightseagreen;
				position:fixed;
				top:0;
				right:-300px;
			}
			
			.in{
				animation:mymove 1s forwards;
				-webkit-animation:mymove 1s forwards ; 
				-moz-animation:mymove 1s forwards ; 
				-o-animation:mymove 1s forwards ; 
			}
			
			.out{
				animation:mymove1 1s forwards;
				-webkit-animation:mymove1 1s forwards ; 
				-moz-animation:mymove1 1s forwards ; 
				-o-animation:mymove1 1s forwards ; 
			}
			@keyframes mymove
			{
				from {transform: translateX(0)}
				to {transform: translateX(-300px)}
			}
			
			@-webkit-keyframes mymove
			{
				from {transform: translateX(0)}
				to {transform: translateX(-300px)}
			}
			
			@-o-keyframes mymove 
			{
				from {transform: translateX(0)}
				to {transform: translateX(-300px)}
			}
			
			@-moz-keyframes mymove 
			{
				from {transform: translateX(0)}
				to {transform: translateX(-300px)}
			}
			
			@keyframes mymove1
			{
				from {transform: translateX(-300px)}
				to {transform: translateX(0)}
			}
			
			@-webkit-keyframes mymove1
			{
				from {transform: translateX(-300px)}
				to {transform: translateX(0)}
			}
			
			@-o-keyframes mymove1 
			{
				from {transform: translateX(-300px)}
				to {transform: translateX(0)}
			}
			
			@-moz-keyframes mymove1
			{
				from {transform: translateX(-300px)}
				to {transform: translateX(0)}
			}
		</style>
	</head>
	<body>
		<button id="s1">s1</button>
		<div id="mask1" >1</div>

	</body>
</html>
<script type="text/javascript">
	let s1=document.getElementById("s1")
	let mask1 = document.getElementById("mask1")
	s1.onclick=function(){

		if(mask1.className.includes("in")){
			mask1.className="out"
		}else{
			mask1.className="in"
		}
		
	}
	
</script>

.in{
	animation:mymove 1s forwards;
	-webkit-animation:mymove 1s forwards ; 
	-moz-animation:mymove 1s forwards ; 
	-o-animation:mymove 1s forwards ; 
}
@keyframes mymove
{
	from {transform: translateX(0)}
	to {transform: translateX(-300px)}
}

forwards让动画保留周期最后一帧

← 滚动条懒加载 →