0
私はCSS3を使ってモーダルを作り、jQueryでクラスを交互にしています。css3で遷移アニメーションを開くと閉じる
モーダルは正しく（css3効果で）開きますが、私の問題はモーダルを閉じるときです。逆の方法でcss3効果でモーダルを閉じることはできません。言い換えれば、私は効果を伴ってモーダルを開き、逆の方法でモーダルを閉じる必要があります。
モーダルオープン0%: -70deg%´ ---- ´100%: 0。私はanimationclosemodalと呼ばれる逆効果を作成しようとします。 0%: 0 ---- 100%: -70degしかし成功しなかった。
モダールをどのように開いて閉じることができますか？効果は出てきますか？
$(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のコードでは、クラスを切り替えるためのより良い方法があります。
Plsは、スニペットに見えますか？私はそれがそれらを切り替えるより良い方法だと思います。私はどのようにそれを作ることができますか？
クラスを切り替えるには、おそらくあなたが探しているものがhttp://api.jquery.com/toggleclass/です。 – Gerrit0