我很难让这个模态按照我想要的方式关闭

Question

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>

***> 嗨，你能帮我吗，我正在尝试在单击关闭时让我的模式向右移动

Answer 1

您需要在添加 "right" 属性

之前删除 "left" 属性

Answer 2

使用百分比来制作动画

function modal(){
    TweenMax.to(".modal", 1, { ease: Power4.easeOut, left:'0'});
}

function hide(){    
  TweenMax.to(".modal", 1, {ease: Power4.easeOut,left:'-100%'});
}

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>

我很难让这个模态按照我想要的方式关闭

I am having a hard time trying to make this modal close the way I want it

javascript

html

css

tween

tween.js