Javascript won't execute "style.transition" -



Javascript won't execute "style.transition" -

i'am trying create photo gallery. i've got problem code:

function zmienzdjecie(currentobject, nextobject, direction) { var current = document.getelementbyid(currentobject); var kierunek = "0%"; if (direction == "next") { kierunek = "100%"; } else { kierunek = "-100%"; } current.style.transition = "right 1.0s, opacity 1s"; current.style.right = kierunek; current.style.opacity = "0"; settimeout(function () { lokphoto(current) }, 500) var next = document.getelementbyid(nextobject); next.style.display = "block"; next.style.transition = "opacity 1.0s"; next.style.opacity = "1"; }

i don't know why javascript won't execute line:

next.style.transition = "opacity 1.0s";

could tell me wrong ?.

because browser 1 thing @ time (in cases), intents , purposes assigning styles @ same time.

this means transition style hasn't applied yet when you're setting opacity, causing not take effect.

if want style affected transition, try:

next.style.transition = "opacity 1.0s"; requestanimationframe(function() {next.style.opacity = 1;});

this create transition nicely. note may need polyfill requestanimationframe.

javascript

Comments

Popular posts from this blog

c - Compilation of a code: unkown type name string -

java - Bypassing "final local variable defined in an enclosing type" -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -