ポップアップ ウィンドウ用の .show クラスが JS 経由で追加されたときに、キーフレーム アニメーションを有効にしたいと考えています。ただし、アニメーションはページの読み込み時にのみアクティブ化されています。
これが私が持っているJSコードです。
<script type="text/javascript">
$(document).ready(function() {
$("#showSimpleModal").click(function() {
$("div#simpleModal").addClass("show");
return false;
});
$("#closemodal").click(function() {
$("div#simpleModal").removeClass("show");
return false;
});
});
</script>
私のCSS
@-webkit-keyframes editwindow {
0% { -webkit-transform: scale3d(2.5, 2.5, 1); opacity: 0; }
100% { -webkit-transform: scale3d(1, 1, 1) }
}
div#simpleModal {
position: absolute;
top:25%;
left:25%;
width: 560px;
padding: 2px;
background: #495263;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: solid 1px #2b323a;
-moz-box-shadow: 0 0 35px rgba(0, 0, 0, 1), 0 1px rgba(255, 255, 255, .15) inset;
-webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 1), 0 1px rgba(255, 255, 255, .15) inset;
box-shadow: 0 0 35px rgba(0, 0, 0, 1), 0 1px rgba(255, 255, 255, .15) inset;
opacity: 0;
z-index: 0;
}
div#simpleModal.show {
opacity: 1.0;
z-index: 100;
-webkit-animation-name: editwindow;
-webkit-transition: all 0.2s ease-in-out;
-moz-animation-duration: 400ms;
-moz-animation-name: pop;
-moz-animation-timing-function: ease-in-out;
}
ショークラスが追加されたときにアニメーションがアクティブになるようにするにはどうすればよいですか。