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
Post a Comment