Анимация CSS3 при загрузке страницы AddClass без загрузки

Я хотел бы, чтобы мои анимации ключевых кадров активировались, когда класс .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;
}

Как я могу сделать так, чтобы анимация активировалась при добавлении класса шоу.


person Matt    schedule 08.09.2011    source источник


Ответы (1)


Кажется, это работает так, как вы написали: http://jsfiddle.net/pa9SN/1/

person Chris    schedule 08.09.2011
comment
Однако он просто исчезает вместо использования элемента окна редактирования -webkit-keyframes. - person Matt; 13.09.2011