如何從右側滑入jQuery，並進行轉換？

Question

我有一個代碼，當你點擊一個button時，出現一個div。但事實是，我的div從頂部滑入，當有人點擊按鈕時，我想擁有它，它從右側滑入並轉換。但我不知道如何改變當前的代碼來完成這項工作。我知道我不能從display: none切換到visibility和opacity添加CSS動畫，對不對？那麼，我能做些什麼才能使這一切儘可能順利？有人可以看看我的幫助嗎？

這裏是我的代碼：

$(function() { 
 
    $("a#toggle").click(function() { 
 
    $("#slidein").slideToggle(); 
 
    return false; 
 
    }); 
 
});

#slidein { 
 
    display: none; 
 
} 
 

 
.card { 
 
    background-color: #bdbdbd; 
 
    text-transform: uppercase; 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100%; 
 
} 
 

 
.close { 
 
    position: absolute; 
 
    right: 0; 
 
    background: #fff; 
 
    opacity: 1; 
 
    color: #29292b; 
 
    font-size: 10px; 
 
    text-decoration-color: #757575; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div id="slidein"> 
 
    <div class="card rounded-0 border-0"> 
 
    <div class="card-header border-0 p-0"> 
 
     <button type="button" class="close p-2"> 
 
     <span aria-hidden="true">x close</span> 
 
    </button> 
 
     <img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200"> 
 
    </div> 
 
    <!-- /.card-header --> 
 

 
    <div class="card-block py-4 px-3"> 
 
     <h4 class="card-title mb-2">TEXT</h4> 
 
     <p class="card-text">TEXT 
 
     <span>TEXT</span> 
 
     <span>TEXT</span> 
 
     </p> 
 

 
     <h4 class="card-title mb-2">TEXT</h4> 
 
     <p class="card-text">TEXT</p> 
 

 
     <h4 class="card-title mb-2">TEXT</h4> 
 
     <p class="card-text">TEXT</p> 
 

 
     <div class="form-group"> 
 
     <textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea> 
 
     </div> 
 
    </div> 
 
    <!-- /.card-block --> 
 

 
    </div> 
 
</div> 
 
<a href="#" id="toggle">Contact</a>

Answer 1

您可以使用CSS來transition實現自己的目標。最初，面板#slidein中的幻燈片將位於屏幕右邊緣之外。當您點擊a#toggle時，CSS類in將被切換。點擊button.close將從#slidein中刪除類別in，這會將面板滑出。

$(function() { 
 
    $("a#toggle").click(function() { 
 
    $("#slidein").toggleClass("in"); 
 
    return false; 
 
    }); 
 
    
 
    $("button.close").click(function() { 
 
    $("#slidein").removeClass("in"); 
 
    return false; 
 
    }); 
 
});

#slidein { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; /*modify this value to fit your needs*/ 
 
    right: -100%; /*modify this value to fit your needs*/ 
 
    
 
    /*css transition*/ 
 
    -webkit-transition: right 500ms ease-out; 
 
    -moz-transition: right 500ms ease-out; 
 
    -o-transition: right 500ms ease-out; 
 
    transition: right 500ms ease-out; 
 
} 
 

 
#slidein.in { 
 
    right: 0; 
 
} 
 

 
.card { 
 
    background-color: #bdbdbd; 
 
    text-transform: uppercase; 
 
    height: 100%; 
 
} 
 

 
.close { 
 
    position: absolute; 
 
    right: 0; 
 
    background: #fff; 
 
    opacity: 1; 
 
    color: #29292b; 
 
    font-size: 10px; 
 
    text-decoration-color: #757575; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div id="slidein"> 
 
    <div class="card rounded-0 border-0"> 
 
    <div class="card-header border-0 p-0"> 
 
     <button type="button" class="close p-2"> 
 
     <span aria-hidden="true">x close</span> 
 
    </button> 
 
     <img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200"> 
 
    </div> 
 
    <!-- /.card-header --> 
 

 
    <div class="card-block py-4 px-3"> 
 
     <h4 class="card-title mb-2">TEXT</h4> 
 
     <p class="card-text">TEXT 
 
     <span>TEXT</span> 
 
     <span>TEXT</span> 
 
     </p> 
 

 
     <h4 class="card-title mb-2">TEXT</h4> 
 
     <p class="card-text">TEXT</p> 
 

 
     <h4 class="card-title mb-2">TEXT</h4> 
 
     <p class="card-text">TEXT</p> 
 

 
     <div class="form-group"> 
 
     <textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea> 
 
     </div> 
 
    </div> 
 
    <!-- /.card-block --> 
 

 
    </div> 
 
</div> 
 
<a href="#" id="toggle">Contact</a>