如何从右侧滑入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>