Usando jQuerypruebe esto ( Un Ejemplo Aquí.):

var $a = $('<div>')
.addClass('box a')
.appendTo('#wrapper');
$a.css('opacity'); // added
$a.addClass('in');

Usando JavaScript Vanilla prueba esto:

var e = document.createElement('div');
e.className = 'box e';
document.getElementById('wrapper').appendChild(e);
window.getComputedStyle(e).opacity; // added
e.className += ' in';

Breve idea:

El getComputedStyle () limpia todos los cambios de estilo pendientes y fuerza al motor de diseño a calcular el estado actual del elemento, por lo tanto .css () funciona de manera similar.

Acerca de css() desde jQuery sitio:

El.el método css() es una forma conveniente de obtener una propiedad de estilo primero elemento emparejado, especialmente a la luz de las diferentes formas los navegadores acceden a la mayoría de esas propiedades (el getComputedStyle() método en navegadores basados en estándares frente a currentStyle y Propiedades de runtimeStyle en Internet Explorer) y los diferentes términos los navegadores utilizan para ciertas propiedades.

Puede usar getComputedStyle()/css() en lugar de setTimeout. También puede leer este artículo para obtener información detallada y ejemplos.

Utilice el siguiente código, utilice"focus ()"

Jquery

var $a = $('<div>')
    .addClass('box a')
    .appendTo('#wrapper');
$a.focus(); // focus Added
$a.addClass('in');

Javascript

var e = document.createElement('div');
e.className = 'box e';
document.getElementById('wrapper').appendChild(e).focus(); // focus Added
e.className += ' in';

La solución de@Frizi funciona, pero a veces he encontrado que getComputedStyle no ha funcionado cuando cambio ciertas propiedades en un elemento. Si eso no funciona, puedes probar getBoundingClientRect() de la siguiente manera, que he encontrado que es a prueba de balas:

Supongamos que tenemos un elemento el, en el que queremos hacer una transición opacity, pero el es display:none; opacity: 0:

el.style.display = 'block';
el.style.transition = 'opacity .5s linear';

// reflow
el.getBoundingClientRect();

// it transitions!
el.style.opacity = 1;

En lugar de intentar forzar un repintado inmediato o un cálculo de estilo, intenté usar requestAnimationFrame() para permitir que el navegador pintara en su siguiente marco disponible.

En Chrome + Firefox, el navegador optimiza demasiado el renderizado, por lo que esto todavía no ayuda (funciona en Safari).

Decidí forzar manualmente un retraso con setTimeout() y luego usar requestAnimationFrame() para dejar que el navegador pinte de manera responsable. Si el anexo no se ha pintado antes de que finalice el tiempo de espera, la animación puede ser ignorada, pero parece funcionar fiable.

setTimeout(function () {
    requestAnimationFrame(function () {
        // trigger the animation
    });
}, 20);

Elegí 20ms porque es más grande que 1 frame a 60 fps (16.7 ms) y algunos navegadores no registran tiempos de espera

Crucemos los dedos para forzar el inicio de la animación en el siguiente fotograma y luego iniciarlo responsablemente cuando el navegador esté listo para pintar de nuevo.

A diferencia de Brendan , encontré que requestAnimationFrame() trabajó en Chrome 63, Firefox 57, IE11 y Edge.

var div = document.createElement("div");
document.body.appendChild(div);

requestAnimationFrame(function () {
  div.className = "fade";
});

div {
  height: 100px;
  width: 100px;
  background-color: red;
}

.fade {
  opacity: 0;
  transition: opacity 2s;
}