Question

我有一个以编程方式创建的div数组，如下所示：

// Create grid of pads dynamically, 16x16 in size
var padIdCount = 0;
for (var i = 0; i < 16; i++) {
    for (var j = 0; j < 16; j++) {
        var newPad = document.createElement("div");
        WinJS.Utilities.addClass(newPad, "pad");
        WinJS.Utilities.addClass(newPad, "row" + i);
        WinJS.Utilities.addClass(newPad, "col" + j);
        newPad.id = "pad" + padIdCount;
        document.getElementById("padContainer").appendChild(newPad);
        padIdCount++;
    }

    // Add a single line break after 16 pads
    var newLineBreak = document.createElement("br");
    document.getElementById("padContainer").appendChild(newLineBreak);
}

垫片为深灰色，但如果用户轻敲垫片，它将成为“活动垫”

// Assign handler to pads, to toggle activation on click
var pads = document.querySelectorAll(".pad");
for (var padCount = 0; padCount < pads.length; padCount++) {
   pads[padCount].addEventListener("click", togglePadActivation, false);
}

function togglePadActivation(e) {
    // Get id of pad in question
    var padId = e.target.id;

    // Change pad from active to inactive and vice versa
    var clickedPad = document.getElementById(padId);
    WinJS.Utilities.toggleClass(clickedPad, "activePad");
}

样式

    /* dark grey */
    .pad {
        height: 40px;
        width: 40px;
        margin: 1px;
        padding: 0px;
        background-color: #363636;
        display: inline-table;
    }

    /* dark orange */
.activePad {
    background-color: orangered;
    opacity: 0.6;
}

.playingPad {
    background-color: orangered;
    opacity: 0.6;
    /* workaround for pulse bug */
    animation: pulselightonanimation 3.2s ease-out;
    animation-iteration-count: infinite;
}

@keyframes pulselightonanimation {
    0% {opacity: 1.0;}
    50% {opacity: 0.8;}
    100% {opacity: 0.6;}
}

现在设置已完成，并且事件处理程序已连接，用户可以单击一个按钮，该按钮开始循环遍历所有活动的焊盘（第1行首先，同时第2行，然后同时第2行，依此类推）。为此，我实现了一个setTimeout。

// Run this method every 200ms
function playActiveNotes(rowCount) {
    timer = setTimeout(function () {

        // Reset after the last row, because we are looping indefinitely
        if (rowCount === 16) {
            rowCount = 0;
        }

        // Select all pads from the same row at once
        var currentRow = ".row" + rowCount;
        var currentRowPads = document.querySelectorAll(currentRow);

        // Cycle through each pad, animate and play it if active
        for (var padCount = 0; padCount < currentRowPads.length; padCount++) {

            // If the pad is active play the note
            if (WinJS.Utilities.hasClass(currentRowPads[padCount], "activePad")) {

                // Show the pulse animation
                WinJS.Utilities.addClass(currentRowPads[padCount], "playingPad");

                // TODO: Play short mp3 file here

                // Remove the animation class. This is where it fails
                //currentRowPads[padCount].addEventListener("animationend", callback(currentRowPads[padCount]), false);
                //currentRowPads[padCount].addEventListener("transitionend", callback(currentRowPads[padCount]), false);

                // If I use a nested setTimeout, this removeClass code never gets called. If I comment it out, I don't see the pulse, i.e. add + remove happens too quickly
                //setTimeout(function () {
                    if (padCount < 16)
                        WinJS.Utilities.removeClass(currentRowPads[padCount], "playingPad");
                //}, 1000);

            }
        }

        // Go to the next row
        rowCount++;

        // Then call self to setup a recursive loop.
        playActiveNotes(rowCount);
    }, 200);
}

function callback(element) {
    element.classList.remove('playingPad');
}

当正在播放活动打击垫时（我播放一个短的mp3文件），我希望它能够快速（但不是瞬间）变成亮橙色，然后淡出回原来的深橙色。我怎样才能做到这一点？我尝试使用带有css动画的play pad类，并在transitionend / animation end上删除该类，但这不起作用。

除Javascript外，还允许使用WinJS，但不允许使用JQuery。

Answer 1

我认为如果你能以某种方式获得CSS动画，那仍然是最好的解决方案。

但是，这是一种替代解决方案，使用CSS转换：

/* dark grey */
.pad {
    height: 40px;
    width: 40px;
    margin: 1px;
    padding: 0px;
    background-color: #363636;
    display: inline-table;
}

/* dark orange */
.activePad {
    background-color: #B2371B;
    transition: background-color .5s;
    -webkit-transition: background-color .5s;
}

/* bright orange */
.brightPad {
    background-color: #FFFFFF;
    transition: background-color .1s;
    -webkit-transition: background-color .1s;
}

这应该是这样的，如果你将.brightPad类添加到打击垫，它会快速变为亮橙色（在.1s中）。一旦删除该类并再次设置.activePad，它应该慢慢回到深橙色（.5s）。您必须在触摸时设置.brightPad，然后使用100ms或更长的超时时间再次将其删除。

这是一个快速的JSFiddle：http://jsfiddle.net/R5VjH/1/

（对不起，用白色代替挑选漂亮的亮橙色）

如何在Javascript中为div的数组中的div添加脉冲动画？

1 个答案: