我有一個由 nxn 個較小的方形 div 元素組成的方形網格，我想用 CSS 背景顏色動畫按順序照亮這些元素。我有一個函數來為序列生成一個隨機數組。我遇到的問題是，一旦某個方塊被照亮一次，如果它再次出現在陣列中，它就不會第二次照亮。我相信這是因為一旦為元素分配了 CSS 動畫，動畫就無法在該元素上再次觸發，而且我無法找到使其工作的方法。這是我正在學習的響應式 Web 應用程序課程，評估規定我們只能使用 vanilla JS，并且所有元素必須在 JS 中創建并附加到<body>我們的 index.html 中的空白處。根據序列的每個閃光都是通過 setTimeout 函數觸發的，該函數循環遍歷數組中的所有元素，每次循環將其計時器增加 1 秒（動畫長度也是 1 秒）。定義容器和子 div：function createGameContainer(n, width, height) { var container = document.createElement('div'); //CSS styling container.style.margin = '50px auto' container.style.width = width; container.style.height = height; container.style.display = 'grid'; // loop generates string to create necessary number of grid columns based on the width of the grid of squares var columns = ''; for (i = 0; i < n; i++) { columns += ' calc(' + container.style.width + '/' + n.toString() + ')' } container.style.gridTemplateColumns = columns; container.style.gridRow = 'auto auto'; // gap variable to reduce column and row gap for larger grid sizes // if n is ever set to less than 2, gap is hardcoded to 20 to avoid taking square root of 0 or a negative value var gap; if (n > 1) { gap = 20/Math.sqrt(n-1); } else { gap = 20; } container.style.gridColumnGap = gap.toString() + 'px'; container.style.gridRowGap = gap.toString() + 'px'; container.setAttribute('id', 'game-container'); document.body.appendChild(container);}/*function to create individual squares to be appended to parent game container*/function createSquare(id) { var square = document.createElement('div'); //CSS styling square.style.backgroundColor = '#333'; //square.style.padding = '20px'; square.style.borderRadius = '5px'; square.style.display = 'flex'; square.style.alignItems = 'center'; //set class and square id square.setAttribute('class', 'square'); square.setAttribute('id', id); return square;}
如何從 vanilla JS 中的元素中刪除 CSS 動畫
料青山看我應如是
2021-06-05 16:12:38
