My element has transition: transform .5s

then it has a separate class: transform: translatex(-100%)

So what I would like to achieve is that initially, the element is positioned towards the left. At window onload,When the element is rendered, I remove the transform class, and the browser would animate the element back to its correct position.

But what actually happens is that when the page bees visible/rendered, the element is already at the correct position. and there is no animation.

I tried setTimeout(function() {}, 0); it doesn't work. If I setTimeout for 1 second, it works, but sometime rendering takes long, and I have to setTimeout for 2 seconds. But then sometimes it renders fast, and 2 seconds is a long time to wait.

So overall, I feel this is not a reliable or a correct way of doing this.

How can I achieve what I want, the correct way?

Edit: Sorry guys, after trying to put together a demo, I realized I wasn't removing the class at window onload. This is because my element and its javascript and css are loaded with AJAX. So it can happen before the window onload or after the window onload.

Anyway, now my question is, what if the window takes a long time to load? Could it be possible that my element would be rendered before window finishes loading? Or does browsers only render when the entire window finishes loadings?

Because I want to animate the element as soon as possible. So, is it safe to wait for window onload, in the case that window takes a long time to load(images and slow connection, and stuff)?

And if I load the element with AJAX after the window loads, could I immediately run the animation by removing the transform? Or should I detect for when the element is rendered?

My element has transition: transform .5s

then it has a separate class: transform: translatex(-100%)

So what I would like to achieve is that initially, the element is positioned towards the left. At window onload,When the element is rendered, I remove the transform class, and the browser would animate the element back to its correct position.

But what actually happens is that when the page bees visible/rendered, the element is already at the correct position. and there is no animation.

I tried setTimeout(function() {}, 0); it doesn't work. If I setTimeout for 1 second, it works, but sometime rendering takes long, and I have to setTimeout for 2 seconds. But then sometimes it renders fast, and 2 seconds is a long time to wait.

So overall, I feel this is not a reliable or a correct way of doing this.

How can I achieve what I want, the correct way?

Edit: Sorry guys, after trying to put together a demo, I realized I wasn't removing the class at window onload. This is because my element and its javascript and css are loaded with AJAX. So it can happen before the window onload or after the window onload.

Anyway, now my question is, what if the window takes a long time to load? Could it be possible that my element would be rendered before window finishes loading? Or does browsers only render when the entire window finishes loadings?

Because I want to animate the element as soon as possible. So, is it safe to wait for window onload, in the case that window takes a long time to load(images and slow connection, and stuff)?

And if I load the element with AJAX after the window loads, could I immediately run the animation by removing the transform? Or should I detect for when the element is rendered?

• javascript
• css

• 7 The method you describe sounds like it should work. Can you show us a live example where it doesn't? – Halcyon Commented Apr 25, 2015 at 18:25
• Hard to help when we don't have a demo that replicates problem – charlietfl Commented Apr 25, 2015 at 18:28
• Can you give us a simple demo, i was thinking that your code was executed before the document properly loads, but i missed the part that you mentioned "At window onload". I posted an answer (now deleted) talking onload events because you say that "render sometime takes long and some times its fast" and i tough that you refer to the entire dom content. If the element is an image you should check this post stackoverflow./questions/1977871/… – ecarrizo Commented Apr 25, 2015 at 18:35
• What about a CSS animation? developer.mozilla/fr/docs/Web/CSS/Animations_CSS – Zealot Commented Apr 25, 2015 at 18:43
• It works for me: jsfiddle/5s9ptenv – Oriol Commented Apr 25, 2015 at 18:48

3 Answers 3

You might want to try using a bination of the DOMContentLoaded event and requestAnimationFrame. DOMContentLoaded fires after the document has been pletely loaded and parsed but before all of the images and other assets on the page have pleted downloading. requestAnimationFrame will delay the removal of the class until after the page has been painted so the element will properly transition.

var box = document.getElementById('box'),
    showBox = function (){
      box.classList.remove('offscreen');
    };
document.addEventListener("DOMContentLoaded", function(event) {
    window.requestAnimationFrame(showBox);
});

jsfiddle

You should use DOM Content Loaded event of javascript

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

This will be fired only when your entire content is loaded and parsed fully by your browser.

Don't consider this an answer as I am sure you can find something more elegant, but this may give you some ideas.

Add this to the javascript AJAXed in - be sure to wrap the javascript in a document.ready:

$(function(){
    var giveup = 0; //in case something goes wrong
    var amirendered = 0;
    while (amirendered==0){
        setTimeout(function(){
            if (element.length){
                amirendered = 1;
                $('#myElement').addClass(doTransition);
            }
        },200);
        giveup++;
        if (giveup>200) amirendered++; //prevent endless loop
    }

}); //END document.ready