0

why are not set css properties, which I set right before setting transition in javascript (typescript)? I have this piece of code in my web (in actualActiveStyle is element.style):

let transitionTime = 1;
actualActiveStyle.left = <string>Config.getWindowWidth(true);
actualActiveStyle.transition = "left " + transitionTime + "s";
setTimeout(()=>{actualActiveStyle.transition="";}, transitionTime * 1000)
actualActiveStyle.left = "0px";

Basically what I want to achieve is to put my element outside of window (Config.getWindowWidth() returns correct width), then set transition (for slide effect) and then set its position to 0px (to slide from outside of window to 0px). That setTimeout() is there only to remove transition effect after transtion happens.

But it actually doesn't work! When I set position to outside of window, it simply not happens. Why? One solution, I have found is to do all thing (especially that transition) in setTimeout after set that position to outside of window. But it seems like "ugly" solution, have a look at that:

let transitionTime = 1;
actualActiveStyle.left = <string>Config.getWindowWidth(true);
setTimeout(()=>{
    actualActiveStyle.transition = "left " + transitionTime + "s";
    setTimeout(()=>{actualActiveStyle.transition="";}, transitionTime * 1000)
    actualActiveStyle.left = "0px";
},0);

Is there better way to do what I want? And why doesn't work my first version?

Thanks!

EDIT: minimal reproducible example

Just switch error variable to comfortably choose between default version and my solution with setTimeout().

Petr Marek
  • 595
  • 5
  • 19
  • Can you create a small fiddle to reproduce it? – Nikhil Patil Dec 07 '20 at 11:43
  • Here is example. Just edit error variable to comfortably switch between default code and my solution with setTimeout(): https://codepen.io/dinoq-the-reactor/pen/Exgyjve – Petr Marek Dec 07 '20 at 12:18
  • I looked into a bit. It seems like setting the transition immediately after setting the left attribute makes the transition ineffective. I tried to achieve this with only a single setTimeout and i think its cleaner to do this way. I am not sure why the question is closed so Refer - https://jsfiddle.net/n8c73geq/ – Nikhil Patil Dec 07 '20 at 13:59
  • @NikhilPatil Timeout, which you had remove is there to remove transition, after it ends...So I need it there. – Petr Marek Dec 07 '20 at 14:32

0 Answers0