使用jQuery进行CSS转换

Question

请参阅随附的codepen示例。我试图将一个名为.mail-content的div放到视图中，我已将其定位为绝对不可见。我试图通过单击.super-btn将其放入，然后我想通过单击.close-btn-mail将其发送回视图。 JS不适合我。有什么建议吗？

Updated Code Pen

＆＃13;

＆＃13;

$('.super-btn').on('click', function(){
			$('.mail-content').css({"transform":"translate(100%,100%)"});
		});

	$('.close-btn-mail').on('click', function(){
		$('.mail-content').css({"transform":"translate(-100%,-100%)"});
		
	});

＆＃13;

.mail-content{
	background: rgb(0,0,0);
	width: 100%;
	height: 100%;
	position: absolute;
	top: -100%;
	left: -100%;
	text-align: center;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
	.mail-content h1{
		font-size: 2em;
		position: relative;
		top: 10%;
		color: #fff;

	}
	.mail-content p{
		font-size: 1em;
		position: relative;
		top: 10%;
        color: #fff;
	}

	.close-btn-mail{
		background-color: red;
		width: 100px;
		height: 100px;
		display: block;
		position: absolute;
		bottom: 80px;
		right: 80px;
	}
	

＆＃13;

<a class="super-btn" href="#">Fly-in</a>

<div class="mail-content">
    <h1>mail-content should fly in</h1>
    <p>and then fly back to where it came from</p>
    <a class="close-btn-mail" href="">Send Back</a>
</div>

＆＃13;

＆＃13;

＆＃13;