webkitAnimationEnd 在开始时触发

Question

我正在尝试为滚动的自动收报机制作动画，它会在屏幕上水平移动文本。

webkitAnimationEnd 事件似乎在页面加载后立即触发，而不是在动画结束时触发。为什么会这样？

当我查看使用相同方法的其他示例时，使用同一浏览器查看事件似乎正确触发 - 因此这一定是我的代码有问题。我想检测 "end" 事件，以便我可以在重新滚动代码之前更新 div 元素中的文本。）

这是我的代码（也在 jsFiddle 中，here）：

var tt;

function startTicker() {
  tt = document.getElementById("tickerText");
  tt.addEventListener('webkitAnimationEnd', updateTicker());
}

function updateTicker() {
  alert('end');
}

body {
  color: #829CB5;
  background-color: #1A354A;
  font-size: 60%;
  font-family: sans-serif;
  overflow: hidden
}

div#ticker {
  font-size: 140%;
  position: absolute;
  top: 0;
  left: -2px;
  border-width: 2px;
  height: 1em;
  width: 101%;
  background-color: black;
  color: #CEEAFA;
}

div#tickerText {
  position: absolute;
  top: 2px;
  left: 0px;
  height: 1em;
  width: 101%;
  background-color: black;
  color: #CEEAFA;
  -webkit-transform: translateX(100%);
  -webkit-animation-duration: 30s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-name: scrollTicker;
}

@-webkit-keyframes scrollTicker {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

<html>

<head>

</head>

<body onload="startTicker()">

  <div id="ticker">
    <div id="tickerText">Test</div>
  </div>

</body>

</html>

我只想使用 CSS 和 Javascript（而不是像 Jquery 这样的库）。

Answer 1

注册事件侦听器时

tt.addEventListener('webkitAnimationEnd', updateTicker());

你实际上是在调用函数。它不应该在 updateTicker

之后有 ()

它应该看起来像

tt.addEventListener('webkitAnimationEnd', updateTicker);

使函数传递给addEventListner函数

webkitAnimationEnd 在开始时触发

webkitAnimationEnd fires at the start

javascript

css

webkit-animation