jQueryを使って右から移行するにはどうしたらいいですか？

Question

buttonをクリックすると、divというコードが表示されます。しかし、事は、私のdivが上からスライドし、誰かがボタンをクリックしたときにそれを持っていたい、それはトランジションで右からスライドします。しかし、私は現在のコードを変更してその作業を行う方法を知らない。 display: noneからvisibilityに、opacityからのCSSアニメーションを追加することはできません。できるだけスムーズにするために私は何ができますか？誰かが見て、私を助けてもらえますか？あなたがあなたの目標を達成するためのCSS transitionを使用することができます

$(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

：ここ

は私のコードです。最初に、パネルのスライド#slideinは画面の右端の外側にあります。 CSSクラスinは、a#toggleをクリックするとトグルされます。 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>