javascript - CSS 动画从 JS 事件开始，使用可变颜色

Question

我有一个单元格表，每当我单击一个单元格时，我希望它开始闪烁一种颜色，表明它已被选中，并阻止其他单元格闪烁，从而取消选择它们(因此一次只有一个单元格被选中)。我还希望单元格“记住”它以前的颜色是什么，所以它会在旧颜色和新的“选择颜色”之间闪烁。

问题是:

1. 我不知道如何取消选择。 完成!

2. 它不记得旧颜色，在本例中是红色，但它可以是任何颜色(取决于变量)仍在进行中

   <

更新:感谢您的回答，我已经使用了您的一些方法，但还没有完全涵盖我的目标。这就是我现在拥有的:https://jsfiddle.net/t3g3mq02/12

我仍然遇到的问题是，如果 JS 更改常规背景颜色，CSS 动画不会更改，因为它似乎继承了 CSS 的颜色。在最终代码中，我有改变背景颜色的函数，我在示例代码中使用以下行对此进行了模拟:tds[i].style.backgroundColor = "blue";。我将它添加到迭代中，只是作为示例。

解决方案可能是用 JS 改变动画的样式，但我不知道该怎么做。

HTML:

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

JS:

var tds = document.getElementsByTagName("td");
for(var i=0; i<tds.length; i++) {
    tds[i].style.backgroundColor = "blue";
    tds[i].onclick = function() {
        var selected = document.getElementsByClassName("selected");
        if(selected.length > 0)
            selected[0].className = "";
        this.className = "selected";
    };
}

CSS:

tr {
    background: red
}

.selected {
    animation: colorchange 1.5s infinite;
    -webkit-animation: colorchange 1.5s infinite;
}

@keyframes colorchange
{
    0%, 100%   {background: inherit;}
    40%  {background: cyan;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
    0%, 100%   {background: inherit;}
    40%  {background: cyan;}
}

随意废弃我的代码并提出一个全新的方法!

Answer 1

HTML:

   <table style="width:100%">
        <tr>
            <td class='cell-color'>Jill</td>
            <td class='cell-color'>Smith</td> 
            <td class='cell-color'>50</td>
        </tr>

更改:从 html 中删除了所有 javascript。给单元格一个类名以供选择。

Javascript:

(function(){
    var cells = document.querySelectorAll('.cell-color')

    for(var i = 0; i < cells.length; i++){
        cells[i].addEventListener('click', changeColor, false);
    }

})();

function changeColor(cell){
    var old = document.querySelector('.selected');
    old.className = 'cell';

    var cell = cell.targetElement.src;

    cell.className += 'selected';
}

在这里，我通过类名选择所有单元格，向每个单元格添加一个 eventListener，删除旧的选定类并添加一个新的选定类。

CSS:

tr {
    background-color: red;
}

@keyframes colorchange
{
    0%, 100%   {background: inherit;}
    40%  {background: cyan;}
}

更改:使用从 tr 继承，因此您不必使用复杂的 javascript dom css api 来更改 keyframe 中的值。

和jsfiddle ;