Question

我试图动画滚动的滚动条，它会在屏幕上水平移动文字。

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

当我使用相同的方法查看其他示例时，使用相同的浏览器查看时事件似乎正确触发 - 因此它必须是我的代码的问题。我想检测一下＆＃34;结束＆＃34;事件，所以我可以在重新滚动自动收报机之前更新div元素中的文本。）

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

＆＃13;

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

＆＃13;

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%);
  }
}

＆＃13;

<html>

<head>

</head>

<body onload="startTicker()">

  <div id="ticker">
    <div id="tickerText">Test</div>
  </div>

</body>

</html>

＆＃13;

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

Answer 1

注册事件监听器时

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

你实际上是在调用这个函数。在()

之后不应该有updateTicker

应该看起来像

tt.addEventListener('webkitAnimationEnd', updateTicker);

以便将函数传递给addEventListner函数

webkitAnimationEnd在开始时触发

1 个答案: