CSS transition on an initially hidden elemement

Question

I would like to make a css transition on an element which has display: none set. Consider the following code:

Answer 1

You should not necessarily relay on transitionend callbacks.
To show with a transition on the opacity property (or others) an hidden element that initially has display:none, simply use inline style to set display:block then remove your CSS class .hidden to animate the element as you want:

CSS:

#foo {
    display: none;
    opacity: 1;
    /*optional, other ending properties...*/
    transition: opacity 1s;
}
.hidden {
    opacity: 0;
    /*optional, other starting properties...*/
}

HTML:

    My test div

finally, the javascript part to show the element with a transition:

var elem = document.getElementById('foo');
elem.style.display = 'block';
elem.classList.remove('hidden');