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/

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

1 个答案: