0

我正在尝试为在屏幕上水平移动文本的滚动代码设置动画。

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

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

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

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 这样的库）。

4

1 回答 1

2

当您注册事件侦听器时

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

您实际上是在调用该函数。它不应该有()之后updateTicker

它应该看起来像

tt.addEventListener('webkitAnimationEnd', updateTicker);

以便将函数传递给addEventListner函数

于 2018-02-07T17:06:40.500 回答