用javascript创建的新div的CSS转换

Question

我的目标是创建一个div，然后将其转换到正确的位置。

// the HTML comes from a source, can't change this
var TheHTML = "<div id="abc"></div>";
// HTML to Element
var TempDiv = document.createElement('div');
TempDiv.innerHTML = TheHTML;
var TheNewElement = TempDiv.firstChild;
// adding the new element
document.getElementById("container").appendChild(TheNewElement);
// adding transitions and style
document.getElementById("abc").style.transition = "left 1s, width 1s";
document.getElementById("abc").style.left = "100px";
document.getElementById("abc").style.width = "100px";

这不起作用，它只是在没有任何动画过渡的情况下生成。但是，如果在添加div之后添加一个小延迟，它就可以工作了。示例：

// the HTML comes from a source, can't change this
var TheHTML = "<div id="abc"></div>";
// HTML to Element
var TempDiv = document.createElement('div');
TempDiv.innerHTML = TheHTML;
var TheNewElement = TempDiv.firstChild;
// adding the new element
document.getElementById("container").appendChild(TheNewElement);
// break for short pause
alert("break");
// adding transitions and style
document.getElementById("abc").style.transition = "left 1s, width 1s";
document.getElementById("abc").style.left = "100px";
document.getElementById("abc").style.width = "100px";

我更喜欢一个不需要等待计时器的解决方案，但如果这是一个选项，而不是一些硬编码的计时器，那么等待附加完成也是可以的。

Answer 1

更换

document.getElementById("abc").style.transition = "left 1s, width 1s";
document.getElementById("abc").style.left = "100px";
document.getElementById("abc").style.width = "100px";

带有

document.getElementById('abc').animate([
{left: '0', width: '0'},
{left: '100px', width: '100px'}
], {
duration: 1000,
fill: 'forwards'
});

不要忘记fill: 'forwards'属性。如果你不添加这个，这个动画将不会持久

Answer 2

为什么不将js与css动画结合起来？

var TheHTML = "<div class="moveTransition">Test</div>";
// HTML to Element
var TempDiv = document.createElement('div');
TempDiv.innerHTML = TheHTML;
// adding the new element
document.querySelector(".container").appendChild(TempDiv);

.moveTransition{
animation: move 1s ease forwards;
}
@keyframes move {
to {
transform: translateX(100px)
}

}

<div class="container">
</div>

Answer 3

我刚刚找到了异步函数和await。解决方案：

// the HTML comes from a source, can't change this
var TheHTML = "<div id="abc"></div>";
// HTML to Element
var TempDiv = document.createElement('div');
TempDiv.innerHTML = TheHTML;
var TheNewElement = TempDiv.firstChild;

// function so await can be used
async function MainFunc() {

// adding the new element
await document.getElementById("container").appendChild(TheNewElement);

// adding transitions and style
document.getElementById("abc").style.transition = "left 1s, width 1s";
document.getElementById("abc").style.left = "100px";
document.getElementById("abc").style.width = "100px";

};
MainFunc();

Answer 4

在注入div之前，请将此CSS包含在页面中

#abc {
--left: 0;
--width: 0;
position: absolute; /* or relative/fixed */
left: var(--left);
width: var(--width);
transition: left 1s, width 1s;
}

特别是如果初始状态下的div为空，则将width和left设置为0(或您喜欢的其他有意义的值(。此外，转换可能已经包含在样式本身中，因为此属性的值似乎是静态定义的，而不依赖于Javascript。

然后，当您附加div时，只需更改变量

let abc = document.getElementById("abc");
abc.style.setProperty('--width', '100px');
abc.style.setProperty('--left',  '100px');

因此动画将被触发，从默认值(而不是auto(更改为新值，并且不需要延迟。