mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-07 09:31:53 +00:00
f4636a0cf5
This patch fixes two issues: - Animation events that should go to the target element now do (some were previously being dispatched on the animation itself.) - We update the "previous phase" and "previous iteration" fields of animation effects, so that we can actually detect phase changes. This means we stop thinking animations always just started, something that caused each animation to send 60 animationstart events every second (to the wrong target!)
46 lines
1.1 KiB
HTML
46 lines
1.1 KiB
HTML
<!doctype html><style>
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
div {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: #3498db;
|
|
position: relative;
|
|
animation: moveRight 0.1s linear;
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@keyframes moveRight {
|
|
0% {
|
|
left: 0;
|
|
}
|
|
100% {
|
|
left: 100px;
|
|
}
|
|
}
|
|
</style>
|
|
<body>
|
|
<script src="../../include.js"></script>
|
|
<div id="d"></div>
|
|
<script>
|
|
asyncTest(done => {
|
|
let div = document.getElementById("d");
|
|
div.addEventListener("animationstart", () => {
|
|
println("animationstart");
|
|
});
|
|
div.addEventListener("animationend", () => {
|
|
println("animationend");
|
|
div.style.animationPlayState = "paused";
|
|
div.style.display = "none";
|
|
done();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|