jquery - AddClass 上的 CSS3 动画不是页面加载

Question

我希望在通过 JS 添加弹出窗口的 .show 类时激活我的关键帧动画。但是，动画仅在页面加载时被激活。

这是我的 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;
}

我怎样才能让它在添加 show 类时激事件画。

Answer 1

这似乎与您编写的一样有效:http://jsfiddle.net/pa9SN/1/