当类名为“earth”的 div 位于左侧 100% 时，如何获得警报？请不要使用 jQuery，谢谢!我尝试使用 setTimeout，但我希望有另一种方式，不必依赖于时间，而是依赖于位置
<!DOCTYPE html>
<html>
<head>
<style>
.earth {
position :relative;
animation:move 10s linear;
background:red;
height:20px;
width:20px;
}
@-webkit-keyframes move
{
from { left: 0%; }
to { left: 100%; }
}
</style>
<script>
function changetext () {
document.getElementById("demo").style.color = "red";
animation();
}
function animation() {
document.getElementById('ghost').className ='earth';
}
function repeat() {
var sd = document.getElementById("ghost").className = 'earth';
sd.style.display = 'none';
}
</script>
</head>
<body>
<div class="something"></div>
<div id="ghost"> </div>
<p onclick="changetext();" id="demo"> HELLO WORLD </p>
</body>
</html>
最佳答案
您可以使用 animationend事件:
var anim = document.querySelector(".earth");
anim.addEventListener("animationend", function() {
console.log('end !');
});.earth {
position: relative;
animation: move 10s linear;
background: red;
height: 20px;
width: 20px;
}
@-webkit-keyframes move {
from {
left: 0%;
}
to {
left: 100%;
}
}<div class="earth"></div>关于Javascript - 当左侧的 div 为 100% 时，如何获得警报？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49214077/