I have an image that I want to move a certain distance (always the same) and a certain direction (specified in an array) on each mouse-click. The first click moves it in the direction specified in the first array element, the second in the second and so on.
This works fine unless I ask it to move in the same direction twice in a row. In that case it moves instantly to the finishing position with no animation, as if it had started the animation there, although the debugger shows the location, as defined by unitElement.style.left as corresponding correctly to its appearance on-screen.
The HTML, with four transformations and an image to move:
<style>
.unit { width: 60px; height: 60px; position: absolute; }
@keyframes N {100% {transform: translate(0px, -60px);}}
@keyframes E {100% {transform: translate(60px, 0px);}}
@keyframes S {100% {transform: translate(0px, 60px);}}
@keyframes W {100% {transform: translate(-60px, 0px);}}
</style>
<body>
<img src="test.png" class="unit" id="F1" />
</body>
The function that is called on the click event:
function nextPulseAnimate() {
pulse++;
for(var index = 0; index < units.length; index++) {
var unit = units[index];
var direction = unit.moves[pulse-1]
var unitElement = document.getElementById(unit.name);
//ensure that the image is starting from the right place
unitElement.style.left = unit.start.x;
unitElement.style.top = unit.start.y;
unitElement.style.animation = direction + " 2s ease-in-out forwards";
}
//then re-set the locations ready for next pulse
//If this is not done, each animation will start from the unit's original location
for(var index = 0; index < units.length; index++) {
var unit = units[index];
var direction = unit.moves[pulse-1]
switch (direction){
case "N":
unit.start.y -= 60;
break;
case "E":
unit.start.x += 60;
break;
case "S":
unit.start.y += 60;
break;
case "W":
unit.start.x -= 60;
break;
}
}
}
The "unit" referred to in the function is derived from a global array of objects that looks like this (in practice it will have a couple of dozen elements):
units = [
{name: "F1", start: {x: 0, y: 0}, moves: ["S", "E", "E", "E"]}
];
For completeness, there is one other global variabe defined (and used above): pulse = 0
Here is what I mean:
units = [{name: "F1", start: { x: '0px', y: '0px'},
moves: ["S", "E", "E", "N", "W", "W"]
},
{ name: "F2", start: { x: '120px', y: '60px' },
moves: ["N", "W", "W", "S", "E", "E"]
}
];
var pulse = 0;
function init() {
document.body.addEventListener("click", nextPulseAnimate);
for (var index = 0; index < units.length; index++) {
var unit = units[index];
var unitElement = document.getElementById(unit.name);
unitElement.style.left = unit.start.x;
unitElement.style.top = unit.start.y;
unitElement.addEventListener('animationend', (event) => {
document.body.addEventListener("click", nextPulseAnimate);
var e = event.target;
/* get position relative to viewport */
var r = e.getBoundingClientRect();
e.style.left = r.left + 'px';
e.style.top = r.top + 'px';
/* remove animation so that you can use it again */
e.style.animation = 'none';
});
}
}
function nextPulseAnimate() {
pulse++;
if (pulse < 7) {
document.getElementById('stats').innerText = 'Moves: ' + pulse + '/6';
//don't let user click while animation is going on
document.body.removeEventListener('click', nextPulseAnimate);
}
for (var index = 0; index < units.length; index++) {
var unit = units[index];
var direction = unit.moves[pulse - 1]
var unitElement = document.getElementById(unit.name);
unitElement.style.animation = direction + " 2s ease-in-out forwards";
}
}body {
width: 90vw;
height: 90vh
}
p {
position: fixed;
top: 40vh;
}
.unit { width: 60px; height: 60px; position: absolute; }
@keyframes N {100% {transform: translate(0px, -60px);}}
@keyframes E {100% {transform: translate(60px, 0px);}}
@keyframes S {100% {transform: translate(0px, 60px);}}
@keyframes W {100% {transform: translate(-60px, 0px);}}<!DOCTYPE html>
<html>
<body onload="init()">
<img src="https://dummyimage.com/60x60/000/fff.jpg" class="unit" id="F1" />
<img src="https://dummyimage.com/60x60/a0a/fff.jpg" class="unit" id="F2" />
<p id=stats>Click anywhere to trigger moves</p>
</body>
</html>