Question

以下代码片段应该在另一个元素（frontEl）中创建两个元素（backEl和rotatingEl）。然后，rotatingEl应该附加到另一个元素el。当发生这种情况时，我希望它能够进行css转换。但是，只有当我在创建后放置console.log(rotatingEl)时才会这样做。我认为这是一个时间问题，但不知道如何解决它。

CSS：

.flip {
 transform: rotateY(180deg) translate3d(0,0,0);
}

的javascript

var frontEl = document.createElement("span");
frontEl.className = 'front';
frontEl.innerHTML = el.innerHTML;

var backEl = document.createElement("span");
backEl.className = 'back';
backEl.innerHTML = array[index + 1];

var rotatingEl = document.createElement("div");
rotatingEl.className = 'rotating flip';

rotatingEl.appendChild(frontEl);
rotatingEl.appendChild(backEl);

el.innerHTML = "";
el.appendChild(rotatingEl);

console.log(rotatingEl); // if I remove this, it breaks

rotatingEl.setAttribute("style", 
"-webkit-transform: rotateY(-180deg);-moz-transform:  rotateY(-180deg);-o-transform:  rotateY(-180deg);transform:  rotateY(-180deg)");

Answer 1

如果您对时间问题的理解是正确的，那么黑客就会添加一个window.setTimeout。

除非我添加console.log，否则Css转换不起作用

1 个答案: