使用 javascript 创建的新 div 的 CSS 转换

Question

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

// 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

我刚刚找到 async 函数和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 2

更换你的

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'属性。 如果您不添加此 animation 将不会持续存在

Answer 3

为什么不将 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 4

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

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

特别是如果初始 state 的 div 为空集width并left为0 （或您喜欢的其他有意义的值）。 此外，过渡可能已经包含在样式本身中，因为此属性的值似乎是静态定义的，不依赖于 Javascript。

然后，当你 append 一个div只需更改变量

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

因此 animation 将被触发，从默认值（不是auto ）更改为新值，并且不需要延迟。