用於內容加載的CSS過渡

Question

到目前為止，我正在用CSS3在HTML5項目中實現一些動畫。 我可以這樣做，例如：

#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);
}

這會將我的紅色div的不透明度從0.75更改為1 。 這也適用於div懸停時的其他屬性，例如color屬性，甚至border-radius 。

我的問題在於，當我使用JavaScript操作DOM時，屬性會自動更改，例如，將src添加到img或將某些內容添加到div時， height或width會發生變化。

對於圖像情況，我有以下CSS：

.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;
}

然后使用JavaScript將圖像動態加載到DOM ：

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

首先，圖像只是在容器DIV上顯示為正方形。 當img未完成加載時，它看起來像這樣：

但是，當內容src被加載時，它看起來像這樣：

我在州之間沒有動畫。

我確定的img至少發生了兩次大小更改，一次是什么都不做（沒有大小，沒有樣式），並且應用了樣式（有些大小取決於樣式），第二次是因為節點沒有內容但只有空白並將其大小加載到一個新的大小。 我更關心第二個，我不確定第一個在技術上是否會發生。

有沒有一種方法可以處理僅通過CSS選擇器和過渡通過操縱節點內容觸發的大小變化？

Answer 1

將圖像添加到side div后，您應該添加CSS類名稱。

您可以通過使用setTimeout函數來實現。

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

或在Jquery中

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