我正在尝试为滚动行情动画设置动画,以在屏幕上水平移动文本。
webkitAnimationEnd事件似乎在页面加载后立即触发,而不是在动画结束时触发。为什么会这样呢?
当我使用相同的方法查看其他示例时,使用相同的浏览器查看该事件似乎可以正确触发-因此我的代码一定是有问题的。我想检测“结束”事件,以便在重新滚动代码之前可以更新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这样的库)。
最佳答案
当您注册事件监听器时
tt.addEventListener('webkitAnimationEnd', updateTicker());
您实际上是在调用该函数。
()
后不应有updateTicker
它应该看起来像
tt.addEventListener('webkitAnimationEnd', updateTicker);
以便将该函数传递给
addEventListner
函数