我刚刚完成了一个功能齐全的Connect Four主板，但是我希望整合动画，以便令牌落入主板。我正在寻找一个简单的Javascript / CSS解决方案，没有jQuery或类似的东西。让元素本身落入所需的插槽是最佳的，但如果这不可能，我理解。
我的代码由7种不同的函数组成（每个函数对应于它们组织的表的每一行）。在每一个中，它检查最低的裸孔是什么，以便它知道放下它的位置。
HTML：
<table>
<tr id="droprow">
<td><button onclick = "drop1()" class = "droplocation" id="Z1">+</button></td>
<td><button onclick = "drop2()" class = "droplocation" id="Z2">+</button></td>
<td><button onclick = "drop3()" class = "droplocation" id="Z3">+</button></td>
<td><button onclick = "drop4()" class = "droplocation" id="Z4">+</button></td>
<td><button onclick = "drop5()" class = "droplocation" id="Z5">+</button></td>
<td><button onclick = "drop6()" class = "droplocation" id="Z6">+</button></td>
<td><button onclick = "drop7()" class = "droplocation" id="Z7">+</button></td>
</tr>
<tr>
<td><button class = "hole" id="A1"></button></td>
<td><button class = "hole" id="A2"></button></td>
<td><button class = "hole" id="A3"></button></td>
<td><button class = "hole" id="A4"></button></td>
<td><button class = "hole" id="A5"></button></td>
<td><button class = "hole" id="A6"></button></td>
<td><button class = "hole" id="A7"></button></td>
</tr>
<tr>
<td><button class = "hole" id="B1"></button></td>
<td><button class = "hole" id="B2"></button></td>
<td><button class = "hole" id="B3"></button></td>
<td><button class = "hole" id="B4"></button></td>
<td><button class = "hole" id="B5"></button></td>
<td><button class = "hole" id="B6"></button></td>
<td><button class = "hole" id="B7"></button></td>
</tr>
<tr>
<td><button class = "hole" id="C1"></button></td>
<td><button class = "hole" id="C2"></button></td>
<td><button class = "hole" id="C3"></button></td>
<td><button class = "hole" id="C4"></button></td>
<td><button class = "hole" id="C5"></button></td>
<td><button class = "hole" id="C6"></button></td>
<td><button class = "hole" id="C7"></button></td>
</tr>
<tr>
<td><button class = "hole" id="D1"></button></td>
<td><button class = "hole" id="D2"></button></td>
<td><button class = "hole" id="D3"></button></td>
<td><button class = "hole" id="D4"></button></td>
<td><button class = "hole" id="D5"></button></td>
<td><button class = "hole" id="D6"></button></td>
<td><button class = "hole" id="D7"></button></td>
</tr>
<tr>
<td><button class = "hole" id="E1"></button></td>
<td><button class = "hole" id="E2"></button></td>
<td><button class = "hole" id="E3"></button></td>
<td><button class = "hole" id="E4"></button></td>
<td><button class = "hole" id="E5"></button></td>
<td><button class = "hole" id="E6"></button></td>
<td><button class = "hole" id="E7"></button></td>
</tr>
<tr>
<td><button class = "hole" id="F1"></button></td>
<td><button class = "hole" id="F2"></button></td>
<td><button class = "hole" id="F3"></button></td>
<td><button class = "hole" id="F4"></button></td>
<td><button class = "hole" id="F5"></button></td>
<td><button class = "hole" id="F6"></button></td>
<td><button class = "hole" id="F7"></button></td>
</tr>
</table>
（droprow行是您单击以在该列中删除标记的按钮行。）
JavaScript（对于第一行，所有其他行都遵循这种完全相同的格式，但ID已更改）：
function drop1() {
if(turn == "red" && gameisover == false) {
if(f1isempty == true){
document.getElementById("F1").style.backgroundColor = "#f44256";
f1isempty = false;
f1isred = true;
checkForRedWin();
} else if(e1isempty == true){
document.getElementById("E1").style.backgroundColor = "#f44256";
e1isempty = false;
e1isred = true;
checkForRedWin();
} else if(d1isempty == true){
document.getElementById("D1").style.backgroundColor = "#f44256";
d1isempty = false;
d1isred = true;
checkForRedWin();
} else if(c1isempty == true){
document.getElementById("C1").style.backgroundColor = "#f44256";
c1isempty = false;
c1isred = true;
checkForRedWin();
} else if(b1isempty == true){
document.getElementById("B1").style.backgroundColor = "#f44256";
b1isempty = false;
b1isred = true;
checkForRedWin();
} else if(a1isempty == true){
document.getElementById("A1").style.backgroundColor = "#f44256";
a1isempty = false;
a1isred = true;
checkForRedWin();
checkForRedWin();
} else {
alert("Looks like that column is filled up! Let's try another one, shall we?");
}
} else if(turn == "blue" && gameisover == false) {
if(f1isempty == true){
document.getElementById("F1").style.backgroundColor = "#4183f4";
f1isempty = false;
f1isblue = true;
checkForBlueWin();
} else if(e1isempty == true){
document.getElementById("E1").style.backgroundColor = "#4183f4";
e1isempty = false;
e1isblue = true;
checkForBlueWin();
} else if(d1isempty == true){
document.getElementById("D1").style.backgroundColor = "#4183f4";
d1isempty = false;
d1isblue = true;
checkForBlueWin();
} else if(c1isempty == true){
document.getElementById("C1").style.backgroundColor = "#4183f4";
c1isempty = false;
c1isblue = true;
checkForBlueWin();
} else if(b1isempty == true){
document.getElementById("B1").style.backgroundColor = "#4183f4";
b1isempty = false;
b1isblue = true;
checkForBlueWin();
} else if(a1isempty == true){
document.getElementById("A1").style.backgroundColor = "#4183f4";
a1isempty = false;
a1isblue = true;
checkForBlueWin();
} else {
alert("Looks like that column is filled up! Let's try another one, shall we?");
}
}
}
它运作得很好，但有一些关于它的存在方式让我感到烦恼。
（是的，我知道只使用带参数的单个函数会更聪明，但我当时并没有想到这一点，所以。但这并不重要;它已经完成了。）
答案 0 :(得分：1)
一种方法是在设置背景颜色时添加带有CSS动画的类。
.fall {
animation-name: fall-animation;
animation-duration: 500ms;
}
@keyframes fall-animation {
from {
transform: translateY(-500px);
}
to {
transform: translateY(0);
}
}
然后在设置背景颜色时，还要添加此类：
document.getElementById("A1").style.backgroundColor = "#4183f4";
document.getElementById("A1").classList.add('fall');
这有点笨拙，因为他们都会从他们休息的地方以上500px下降，但是你可以做一些数学运算并弄清楚每一行的标记应该从哪里开始。
这是一个关于这个想法的小提琴：https://jsfiddle.net/7mvL0240/1/