如何使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";
}

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