No animation, after changing the style tag of the back/front divs/imgs

[matejbart]

Is there a possibilty to completely reset the parent, which is going to be flipped?

At the beginning of my web program, I'm distributing the src of the images and finally starting it with flip('parents_ID').flip(true); This works perfectly. The img-tag looks like:

<img id="playerCard1" class="back" src="cards/german/e10.svg" style="transform: rotateY(0deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out;">

But when I try to remove the src and the style of the img-tags, then it does not animate anymore. When I inspect the issue, I found out, that if the completely style tag was removed, the flip function just adds a rotation into it. It finally looks like this:

<img id="playerCard1" class="back" src="cards/german/b3.svg" style="transform: rotateY(0deg); >

Maybe the issue happens because, flip(true) is just flipping the back to the front and when I try to use it again, with different styles/srcs, then the function maybe sees that it was already used, so it doesn't change the styles, just the rotation, and therefore it works, but the animation not. Now, I would like to start a completely new flip(true), altough it has been used before. Is this possible?

[Download]

Why are you removing the styles? I think Flip will manage them for you?

Would it maybe be possible for you to code up a small demo of what you are struggling with in JSFiddle ? I'm not sure if I understand you correctly. In my experience a good example that we can all experiment with helps tremendously in getting it fixed.

[matejbart]

I tried to remove the styles, because I thought, that it might reset the transform rotation property.

But now I think I found out the problem, I don't know if it's a bug or just a wrong way I used it.

To stay simple, after a animation/rotation I just try to remove the old src like that:

$(elementParent).children("img").removeAttr('src');

This command causes the problem, so when I use this and for example I'm passing new src attributes to it with:

$(newParent).children(".front").attr("src", src2);
$(newParent).children(".back").attr("src", src);

and after that I'll use flip(true)/flip(false), which is automatically started by my functions, it turns to the right side, but there is no animation effect.

When I do this is all without the removeAttr command, the flipping effect works as it should work.

But for my case, I need to remove the old sources for a while and then replace it with new one. I'll try to make an example in JSFiddle.

[matejbart]

Hi, I solved the problem. It wasn't a bug, it was just the fact, that I've used img-tags instead of div-tags. In those div-tags I use now my img-tags and it works great. Sorry for this waste of time.

[Download]

No worries, glad you solved it!