geostocker geostocker - 1 month ago 6
CSS Question

Stop specific transition before occuring

I've got quite a rudementary question that I can't really seem to fix myself. I've already looked into similar answers, but none of the implementations seem to be possible implementations for me.

Basically I have an image(png) that moves around in a little box (here is the game).
The problem I'm facing is that the image should flip if you change the direction the sprite is moving (left-right) and that it should be able to jump.
The transitions work fine separately, but when I try to jump when faced left it turns right in the jump.

I need to remove the baddie-left before jumping, I suppose. But it doesn't seem to work when I've done it...

Full disclaimer: We are not supposed to use anything but 'normal' js (ie. no jquery).

Here is the js:

switch(key) {
case 32: //jumping
if(!baddie.classList.contains('baddie-jumping')){
baddie.classList.add('baddie-jumping');
window.setTimeout(function(){baddie.classList.remove('baddie-jumping');}, 350);
}
break;
case 37: //moving left
if (left_available(left - step)){
if(!baddie.classList.contains('baddie-left')){
baddie.classList.add('baddie-left');
}
left = left - step;
} else {left = 150;
top = 130;}
break;
case 38:
if (top_available(top - step)){
top = top - step;
} else {left = 150;
top = 130;}
break;
case 39: //moving right
if (left_available(left + step)){
if(baddie.classList.contains('baddie-left')){
baddie.classList.remove('baddie-left');
}
left = left + step;
} else {left = 150;
top = 130;}
break;
case 40:
if (top_available(top + step)){
top = top + step;
} else {left = 150;
top = 130;}
break;
}


And the css:

.content {
/* If #content position is absolute, the #baddie position will be given in reference to it's parent, which is #content
* Makes it easier to do collision calculations */
position: absolute;
width: 400px;
height: 300px;
border: solid 1px #000;
}

.baddie{
/* Baddie's postition must be absolute, otherwise we can't move him by changing top and left */
position: absolute;
height: 50px;
width: 50px;

/* Change this to your own baddie! */
background: url("../img/viking.png");
background-size: 50px;
transition: all 0.35s ease;
}

.baddie-left {
transform: rotateY(180deg);
}

.baddie-jumping {
transform: scale(1.5) translateY(-40px);
}

Answer

When you add .baddie-jumping class, it just overwrite transform property of .baddie-left class. You should add to your css:

.baddie-left.baddie-jumping {
    transform: scale(1.5) translateY(-40px) rotateY(180deg);
}