CSS中的转换似乎失败了，原因是什么

Transitionend in CSS seems to fail, why?

本文关键字：是什么 失败 转换 CSS      更新时间：2023-09-26

所以我试图修改KuKu-Kube游戏的纯HTML/CSS版本，添加计时器、更多级别和标准化的一面，但我可能会解决这些问题。

所以，我有一段代码：

var element = document.getElementsByClassName("cube");
element.addEventListener("transitionend", showMessage(), false);
element.addEventListener('webkitTransitionEnd', showMessage(), false);
element.addEventListener('oTransitionEnd', showMessage(), false);
element.addEventListener('transitionend', showMessage(), false);
element.addEventListener('msTransitionEnd', showMessage(), false);

我花了至少一个小时仔细研究了以前的代码，作为一个新手，我的分析是，多维数据集是复选框，它们会转换。

顺便说一句，JSFiddle在这里，但我觉得它不起作用的原因是在这5行。

那么，为什么transitionend不触发showMessage（）呢？

提前谢谢。

因为您正在立即调用showMessage，而不是将其设置为事件侦听器。

例如，如果你这样做：

var value = showMessage();
console.log(value);

您可能会在控制台中看到undefined。相反，您希望传递函数本身作为参数，而不是它的返回值。

element.addEventListener('transitionend', showMessage, false);
//                           Notice the lack of () --^

此外，如果你打开你的控制台，你会看到你得到了一个

未捕获的类型错误：element.addEventListener不是函数

错误。这是因为document.getElementsByClassName返回的是节点的集合，而不是单个节点。相反，您应该循环遍历该集合，并将事件附加到每个单独的节点。

var elements = document.getElementsByClassName('cube');
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  element.addEventListener('transitionend', showMessage, false);
  // ...
}

您基本上是在用cube调用所有元素——所以它是一个数组——您必须对它进行迭代，才能为所有元素添加监听器。Fiddle Here

var elements = document.getElementsByClassName("cube");
for(var i=0; i<elements.length; i++){
element[i].addEventListener("transitionend", showMessage, false);
element[i].addEventListener('webkitTransitionEnd', showMessage, false);
element[i].addEventListener('oTransitionEnd', showMessage, false);
element[i].addEventListener('transitionend', showMessage, false);
element[i].addEventListener('msTransitionEnd', showMessage, false);
}
相关文章：