css - 如何使 CSS3 动画可重用？

Question

没有 JQuery。

我有以下代码，但它只能单击一次。它将无法被使用两次:

@-moz-keyframes lulse {
    0%{
        -moz-transform:scale(1);
    }
    20%{
        -moz-transform:scale(1.5);
    }
    100% {
        -moz-transform:scale(1);
    }
}

.pinto {
    -moz-animation-name: lulse;
    -moz-animation-duration: .2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -moz-animation-direction: normal;
}

Javascript:

onclick="changeClass(this.id);

function changeClass(a)
{
    document.getElementById(a).className += "pinto";

}

Answer 1

嗯，从表面上看，您应该能够删除点击处理程序开头的类(如果存在)。具体来说:

function changeClass(a) {
    var elementA = document.getElementById(a);
    var regEx = new RegExp('(\\s|^)pinto(\\s|$)');
    elementA.className = elementA.className.replace(regEx,' ');
    elementA.className += " pinto";
}

这将删除类并重新应用它，这应该会重新启动效果。