CSS3 transition not working when adding classes via javascript

Question

I got a strange problem. I am working at my JS-only-lightbox to support multiple images ( https://github.com/felixhagspiel/jsOnlyLightbox for those who are interested ). So I am not using jQuery. Now I want to add the possibility to add animations via CSS3-transitions. What I do is to add the class jslghtbx-animating-next to the image inside the lightbox, once the next-arrow has been clicked. The image has an transition: all .6s ease-in-out; property, and the class jslghtbx-animating-next contains nothing but margin-left: -100%;. But the image isnt animated, it just pops to the new position. On the other hand, when I use opacity instead, it works. When I apply the margin-left-property via firebug, the animation also works. I thought maybe it is because the image has margin-left: auto; per default, but removing that didn`t do the trick.

Testingserver: http://testing.felixhagspiel.de/index.html

Zip-File: http://testing.felixhagspiel.de/jsOnlyLightbox.rar

You have to click on one of the images below the headline "Use groups to show multiple images" and then click on the right arrow (only next-function is in there so far). I also added a delay of 5sec for easier debugging.

Any help would be great!

Your CSS looks messed up to me. You've got things like "-webkit-margin-left" set up with values that look like "transition" values, listed under class "jslghtbx-animate-next". — Pointy
– Pointy, Commented Jul 30, 2014 at 11:32
Yes, sorry, I added the prefixr-mixin and forgot to adjust it. It is fixed now but the problem still exists — Felix Hagspiel
– Felix Hagspiel, Commented Jul 30, 2014 at 11:49
Well I think the problem may be that you're trying to animate from "auto" to "-100%". If you alter the margin rule from .jslghtbx-contentwrapper > img to something like margin-left: 30% then the transition works properly. You can't animate from "auto" to a numeric value, I don't think. — Pointy
– Pointy, Commented Jul 30, 2014 at 12:57
Yes, you are right. I tried setting margin-left to sth. different before, but I think the prefixr mixed it up then. Thank you! If you provide it as answer I can select it as solution. — Felix Hagspiel
– Felix Hagspiel, Commented Jul 30, 2014 at 13:07

Pointy · Accepted Answer · 2014-07-30 13:14:00Z

1

It is (quite unforunately, in my opinion) not possible with CSS transitions to animate the margin (or anything else, for that matter) from "auto" to a numeric value. It might be possible to do it with JavaScript; something like Velocity might help.

answered Jul 30, 2014 at 13:14

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS3 transition not working when adding classes via javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related