I have a transform and a check-in javascript. Currently, the alert displays before the actual transform. Is there a way to only display the alert after the transform is complete?
The Object is to do the transform and then do the check so that I can have some sort of event happen to display the winners banner in the middle of the screen. Right now the only objective is to get the check to happen after the transformation.
This is what I have now:
<html>
<head>
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
document.getElementsByTagName('HEAD')[0].appendChild(link);
</script>
</head>
<html lang="en">
<body>
<div id="field" class="soccer-field">
<div id="b" class="btnBlue"></div>
<div id="ball" class="btnSoccerBall"></div>
<div id="r" class="btnRed"></div>
</div>
</body>
</html>
<script>
//Add onclick
document.getElementById("b").addEventListener("click", myMoveLeft);
document.getElementById("r").addEventListener("click", myMoveRight);
//Add animation
var item = document.getElementById('ball');
var anim;
var x = 0, y = 0;
function myMoveLeft() {
anim = item.animate([
// keyframes
{ transform: `translate(${x}px, ${y}px)` },
{ transform: `translate(${x + 100}px, ${y}px)` }
], {
duration: 500,
iterations: 1,
fill: 'forwards'
});
x += 100;
if (x == 700) {
alert("ok")
}
}
function myMoveRight() {
anim = item.animate([
// keyframes
{ transform: `translate(${x}px, ${y}px)` },
{ transform: `translate(${x - 100}px, ${y}px)` }
], {
duration: 500,
iterations: 1,
fill: 'forwards'
});
x -= 100;
if (x == -700) {
alert("ok")
}
}
item.addEventListener('animationend', () => {
console.log('Animation ended');
});
</script>
Css
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20rem;
overflow: hidden;
}
.btnBlue {
background-image:url(b.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
margin-left: 20px;
margin-bottom: 20px;
height: 150px;
width: 150px;
}
.btnRed {
background-image:url(r.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
margin-right: 20px;
margin-bottom: 20px;
height: 150px;
width: 150px;
}
.btnSoccerBall {
background-image:url(s.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
position: relative;
margin: auto;
height: 100px;
width: 100px;
}
.soccer-field {
background-image:url(back.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
/* padding: 0 20px; optional */
}
>Solution :
You can use Animation.onfinish function and move your alert code inside it. Try like below.
document.getElementById("b").addEventListener("click", myMoveLeft);
//Add animation
var item = document.getElementById('ball');
var anim;
var x = 0,
y = 0;
function myMoveLeft() {
anim = item.animate([
// keyframes
{
transform: `translate(${x}px, ${y}px)`
},
{
transform: `translate(${x + 100}px, ${y}px)`
}
], {
duration: 500,
iterations: 1,
fill: 'forwards'
}).onfinish = function() {
x += 100;
if (x == 700) {
alert("ok")
}
};
}
item.addEventListener('animationend', () => {
console.log('Animation ended');
});<div>
<input type='button' id='ball' value='ball' />
</div>
<input type='button' id='b' value='l' />