我正在尝试创建一个div创建的动作,然后立即“浮动”直到它出现在屏幕外。
为了实现这一点,我尝试使用CSS transition,它将完全由JavaScript驱动(由于我的用例的限制)。
当我创建一个元素,为其指定过渡样式属性,然后立即尝试通过更改样式(top
)来启动过渡时,会出现问题。
看起来时间问题正在发生,top
样式更改在转换可用之前触发,因此只是立即将我的div移出屏幕,而不是实际执行转换。
这是一个简化的例子:
var
defaultHeight = 50,
iCount = 0,
aColors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
function createBlock() {
var testdiv = document.createElement('div');
testdiv.className = 'testdiv';
document.body.appendChild(testdiv);
testdiv.style.left = '50%';
testdiv.style.backgroundColor = aColors[iCount % aColors.length];
testdiv.style.width = defaultHeight + 'px';
testdiv.style.height = defaultHeight + 'px';
testdiv.style.fontSize = '30px';
testdiv.style.textAlign = 'center';
testdiv.innerHTML = iCount;
testdiv.style.top = '500px';
testdiv.style.position = 'absolute';
iCount++;
return testdiv;
}
document.getElementById('go').onclick = function() {
var testdiv = createBlock();
testdiv.style.transition = "top 2.0s linear 0s";
setTimeout(function() {
testdiv.style.top = (defaultHeight*-2) + 'px';
}, 0); // <- change this to a higher value to see the transition always occur
};
当快速点击“go”按钮(see JSBin)时,div只会偶尔出现(可能是由于上述时间问题)。
如果你增加setTimeout
的延迟值,你会发现过渡几乎总是有效。
有没有办法在创建元素后立即确定性地启动转换(不必诉诸延迟)?
答案 0 :(得分:4)
对于过渡,你需要两个不同的状态。改变。
两个渲染循环样式之间只会被覆盖。它们仅在(重新)渲染节点时应用 因此,如果你的setTimeout()在应用“旧”样式之前触发,则仅覆盖stlyes,并使用目标样式呈现你的节点。
AFAIK。大多数(桌面) - 浏览器争取60fps帧速率,间隔为16.7ms。所以setTimeout(fn,0)很可能在此之前解雇。
你可以像你提到的那样增加超时(我建议至少50ms),或者你可以触发/强制执行节点的渲染;例如,通过询问它的大小。
要获得Node的大小,浏览器首先必须将所有样式应用于Node,以了解它们如何影响它。
此外,上下文对css很重要,因此必须将Node添加到DOM的某个位置,以便浏览器能够获得最终计算的样式。
长答案简短:
document.getElementById('go').onclick = function() {
var testdiv = createBlock();
testdiv.style.transition = "top 2.0s linear 0s";
testdiv.scrollWidth; //trigger rendering
//JsBin brags that you don't do anything with the value.
//and some minifyer may think it is irrelevant and remove it.
//so, increment it (`++`); the value is readonly, you can do no harm by that.
//but the mere expression, as shown, already triggers the rendering.
//now set the target-styles for the transition
testdiv.style.top = (defaultHeight*-2) + 'px';
};
答案 1 :(得分:1)
另一种方法是使用animation
如果您想使用javascript动态创建keyframes
,这里有一个很好的帖子,显示:https://stackoverflow.com/questions/10342494/set-webkit-keyframes-values-using-javascript-variable
var
defaultHeight = 50,
iCount = 0,
aColors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
function createBlock() {
var testdiv = document.createElement('div');
testdiv.className = 'testdiv';
document.body.appendChild(testdiv);
testdiv.style.left = '50%';
testdiv.style.backgroundColor = aColors[iCount % aColors.length];
testdiv.style.width = defaultHeight + 'px';
testdiv.style.height = defaultHeight + 'px';
testdiv.style.fontSize = '30px';
testdiv.style.textAlign = 'center';
testdiv.innerHTML = iCount;
testdiv.style.top = '300px';
testdiv.style.position = 'absolute';
// you can preset the animation here as well
//testdiv.style.animation = 'totop 2.0s linear forwards';
iCount++;
return testdiv;
}
document.getElementById('go').onclick = function() {
var testdiv = createBlock();
testdiv.style.animation = 'totop 2.0s linear forwards';
};
@keyframes totop {
100% { top: -100px; }
}
<button id="go">go</button>