Question

现在我试图在DOM动态创建img标签后使用CSS转换制作动画。

在这里，我将列出包含2个示例的DEMO。

var

 function OneBaloon() {
    baloon1 = document.createElement('img');
    baloon1.id = 'slow_first_img';
    baloon1.setAttribute('src', 'http://s27.postimg.org/6xww0tj9f/baloon.gif');
	var slow_first = document.getElementById("slow_first");
	slow_first.appendChild(baloon1);
	baloon1.style.top = "-50px";
    baloon1.style.visibility = "visible";
    baloon1.style.opacity = 1;
};


function PopUp() {
    var sfd = document.getElementById("slow_first_div");
    sfd.style.top = "-50px";
    sfd.style.visibility = "visible";
    sfd.style.opacity = 1;
};

div#main{
position: relative;
}

.button {
    font-size: 1em;
    font-weight: bold;
    padding: 10px 30px;
    background-color: #248;
    color: #fff;
    border-style: none;
}

#slow_first_div{
    position:absolute;
    top:200px;
    visibility:hidden;
    opacity: 0;
    -webkit-transition : all 0.5s ease-in-out;
    -moz-transition : all 0.5s ease-in-out;
    -o-transition : all 0.5s ease-in-out;
    transition : all 0.5s ease-in-out;
}

#slow_first_img{
    position:absolute;
    top:200px;
    visibility:hidden;
    opacity: 0;
    -webkit-transition : all 0.5s ease-in-out;
    -moz-transition : all 0.5s ease-in-out;
    -o-transition : all 0.5s ease-in-out;
    transition : all 0.5s ease-in-out;
}

一个是我已经提到的（使用DOM）。

另一个通过不使用DOM（直接在HTML中编写img标签）使动画可用

我的问题是为什么前一种情况不起作用，但后一种情况完全有效。

可悲的是，我无法区分它们之间的任何区别。

Plase我需要你的帮助！

CSS Transition不适用于DOM创建

0 个答案: