Transitions CSS pour le chargement du contenu

Question

J'implémente des animations sur mon projet HTML5 avec CSS3 et jusqu'ici tout va bien. Je peux le faire, par exemple:

#someDivId { 
    position: absolute; 
    background:rgba(255,0,0,0.75); 
    transition: all 0.7s ease-in-out; 
    -moz-transition: all 0.7s ease-in-out; 
    -webkit-transition: all 0.7s ease-in-out; 
    -o-transition: all 0.7s ease-in-out; 
} 
#someDivId:hover { 
    background:rgba(255,0,0,1); 
} 

Et cela va changer l'opacité de mon div rouge 0.75-1. Ce travail pour d'autres propriétés de la div sur hover aussi, comme l'attribut color ou même le border-radius.

Mon problème est livré avec des attributs modifiés automatiquement quand je manipule le DOM avec JavaScript, comme le changement de height ou width qui se produit lorsqu'un src est ajouté à un img ou si un contenu est ajouté à un div.

Pour le cas d'image, je le CSS folowing:

.someImageClass { 
    border-color: white; 
    border-width: 15px; 
    border-style: solid; 
    max-height:370px; 
    max-width:370px; 
    transition: all 0.7s ease-in-out; 
    -moz-transition: all 0.7s ease-in-out; 
    -webkit-transition: all 0.7s ease-in-out; 
    -o-transition: all 0.7s ease-in-out; 
} 

Et l'image est chargée à la DOM dynamique avec JavaScript:

var image = document.createElement("img"); 
image.src = someSourceURL; 
image.className = "someImageClass"; 
document.getElementById("someDiv").appendChild(image); 

Au début, l'image apparaît comme un carré sur le conteneur DIV. Lorsque le img ne se fait pas charger son contenu, il ressemble à ceci:

Mais quand le src de contenu est chargé, il ressemble à ceci:

Je reçois aucune animation entre les états.

Il y avait au moins deux changements de taille pour le img que j'identifie, l'un d'être rien (pas de taille, pas de style) et ayant son style appliqué (une certaine taille selon le style) et le second d'être un nœud avec pas de contenu mais la marge et la taille à un avec son contenu chargé et une nouvelle taille. Je suis plus préoccupé par le second, et je ne suis pas sûr que le premier se produise techniquement.

Existe-t-il un moyen de gérer ce genre de changements de taille déclenchés par la manipulation du contenu d'un nœud uniquement avec des sélecteurs et des transitions CSS?

Answer 1

Vous devez ajouter le nom de la classe CSS une fois que l'image est ajoutée dans la division latérale.

Vous pouvez utiliser la fonction setTimeout.

var image = document.createElement("img"); 
image.src = someImageClass; 
document.getElementById("someDiv").appendChild(image); 
setTimeout(function(){ 
    image.className = "someImageClass"; 
},1); 

Ou dans Jquery

$('#someDiv').html('<img src="' + someImagePath + '" />'); 
setTimeout(function(){ 
    $('#someDiv img').addClass("someImageClass"); 
},1);