0
我正在使用CSS3和交替類與jQuery的模態。用css3過渡動畫 - 打開並關閉
模態打開正確（與css3效果），但我的麻煩是當我關閉模態。我無法以相反的方式使模式與css3效果接近。換句話說，我想打開帶有效果的模態，並以相反的方式關閉模態。
模態打開0%: -70deg%´ ---- ´100%: 0。我嘗試創建一個名爲closemodal的animation，具有相反的效果。 0%: 0 ---- 100%: -70deg但沒有成功。
如何打開和關閉出現效果的模式...效果出來？
PLS，看起來片段：
$(document).ready(function(){
\t $('.modal-open').click(function(){
\t \t $('.overlay').addClass('modal-show');
\t \t $('.modal').addClass('modal-show modal-perspective');
\t \t $('.modal-content').addClass('modal-animate');
\t });
\t $('.modal-close').click(function(){
\t \t $('.overlay').removeClass('modal-show');
\t \t $('.modal').removeClass('modal-show modal-perspective');
\t \t $('.modal-content').removeClass('modal-animate');
\t $('.modal-content').addClass('modal-remove');
\t });
});html, body{
\t margin: 0;
\t padding: 0;
\t box-sizing: border-box;
\t background: #FF3300;
\t font-family: 'Ubuntu', sans-serif;
}
.modal{
\t position: fixed;
\t top: 50%;
\t left: 50%;
\t transform: translate(-50%, -50%);
\t width: 50%;
\t height: auto;
\t min-width: 300px; \t
\t z-index: 2;
\t visibility: hidden; \t
\t display: flex;
\t align-items: center;
\t justify-content: center;
}
.modal-content{
\t padding: 120px 10px;
\t text-align: center;
\t color: #000;
\t background: #bd330f;
\t border-radius: 10px; \t
\t border: 1px solid #909090; \t
\t box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.9); \t
}
.modal-open{
\t position: absolute;
\t top: 50%;
\t left: 50%;
\t transform: translate(-50%, -50%);
\t border: transparent;
\t background: #fff;
\t font-size: 15px;
\t font-weight: bold;
\t padding: 20px 50px;
\t border-radius: 5px;
}
.modal-open:active{
\t outline: transparent;
}
.modal-close{
\t padding: 8px 40px;
border-radius: 8px;
border: transparent;
background: #212121;
color: #fff;
outline: transparent; \t
}
.overlay {
\t position: fixed;
\t width: 100%;
\t height: 100%;
\t visibility: hidden;
\t top: 0;
\t left: 0;
\t z-index: 1;
\t opacity: 0;
\t background: rgba(0, 0, 0, 0.5);
\t transition: all 0.7s;
}
.modal-show {
\t opacity: 1;
\t visibility: visible; \t
}
.modal-perspective{
\t -webkit-perspective: 900px;
\t perspective: 900px; \t \t \t
}
.modal-animate{
\t animation: openmodal 300ms ease-in forwards; \t
}
.modal-remove{
\t animation: closemodal 300ms ease-in-out forwards; \t
}
@keyframes openmodal{
\t 0%{
\t \t transform: rotateX(-70deg);
\t \t -webkit-transform: rotateX(-70deg);
\t \t -moz-transform: rotateX(-70deg);
\t \t -ms-transform: rotateX(-70deg);
\t } \t
\t 100%{
\t \t transform: rotateX(0deg);
\t \t -webkit-transform: rotateX(0deg);
\t \t -moz-transform: rotateX(0deg);
\t \t -ms-transform: rotateX(0deg);
\t }
}
@keyframes closemodal{
\t 0%{
\t \t transform: rotateX(0deg);
\t \t -webkit-transform: rotateX(0deg);
\t \t -moz-transform: rotateX(0deg);
\t \t -ms-transform: rotateX(0deg);
\t } \t
\t 100%{
\t \t transform: rotateX(-70deg);
\t \t -webkit-transform: rotateX(-70deg);
\t \t -moz-transform: rotateX(-70deg);
\t \t -ms-transform: rotateX(-70deg); \t \t
\t }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
\t <div class="modal-content">
\t \t <h3>Modal Dialog</h3>
\t \t <div> \t \t \t \t
\t \t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan.</p>
\t \t \t <button class="modal-close">CLOSE ME!</button>
\t \t </div>
\t </div>
</div>
<button class="modal-open">~ OPEN MODAL ~</button>
<div class="overlay"></div>此外，在我的jQuery的代碼中，有一個更好的方式來切換類？我認爲這是切換它們的更好方法。我如何做到這一點？
對於類切換，http://api.jquery.com/toggleclass/可能是你正在尋找的。 – Gerrit0