内容加载的CSS转换

Question

我正在使用HTML5在CSS3项目上实现一些动画，到目前为止一直很好。我可以做，例如：

#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。

当我使用DOM操纵JavaScript时，我的问题会自动更改属性，例如height或width在src时发生的变化已添加到img或某些内容已添加到div。

对于图像案例，我有以下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);