function modal(){
TweenMax.to(".modal", 1, {left:1, ease:Power4.easeOut});
}
function hide(){
TweenMax.to(".modal", 1, {right:2000, ease:Power4.easeOut});
}

html, body{
margin: 0;
padding: 0;
width: inherit;
height: 100%
}
.container{
width: 100%;
height: 100%;
background-color: dimgrey;
z-index: -1;
}
.modal{
width: 95%;
height: 100%;
position: absolute;
background-color: green;
z-index: 2;
right: 100%;
}
#modalPop{
font-family: monospace;
}
.btn{
width: 10%;
height: 10%;
position: absolute;
border: 1px solid red;
margin-left: 20%;
margin-top: 20px;
z-index: 1;
}
.close {
color: #aaaaaa;
float: right;
font-size: 15px;
font-weight: bold;
margin-right: 20px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="main.js" ></script>
<title>Modal</title>
</head>
<body>
<div class="container">
<div id="modalPop" class="modal">
<h1>THIS IS A MODAL</h1>
<span class="close" onclick="hide()">close</span>
</div>
<div class="btn">
<button onClick="modal()">CLICK ME</button>
</div>
</div>
</body>
</html>
&#13;
***指嗨,你能帮助我吗,我试图在点击关闭时让我的模态向右移动
答案 0 :(得分:0)
你需要删除&#34; left&#34;添加&#34;右键&#34;之前的属性属性
答案 1 :(得分:0)
使用百分比来制作动画
function modal(){
TweenMax.to(".modal", 1, { ease: Power4.easeOut, left:'0'});
}
function hide(){
TweenMax.to(".modal", 1, {ease: Power4.easeOut,left:'-100%'});
}
&#13;
html, body{
margin: 0;
padding: 0;
width: inherit;
height: 100%
}
.container{
width: 100%;
height: 100%;
background-color: dimgrey;
z-index: -1;
}
.modal{
width: 95%;
height: 100%;
position: absolute;
background-color: green;
z-index: 2;
right: 100%;
}
#modalPop{
font-family: monospace;
}
.btn{
width: 10%;
height: 10%;
position: absolute;
border: 1px solid red;
margin-left: 20%;
margin-top: 20px;
z-index: 1;
}
.close {
color: #aaaaaa;
float: right;
font-size: 15px;
font-weight: bold;
margin-right: 20px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="main.js" ></script>
<title>Modal</title>
</head>
<body>
<div class="container">
<div id="modalPop" class="modal">
<h1>THIS IS A MODAL</h1>
<span class="close" onclick="hide()">close</span>
</div>
<div class="btn">
<button onClick="modal()">CLICK ME</button>
</div>
</div>
</body>
</html>
&#13;