使用 javascript 创建的新 div 的 CSS 过渡答案

【问题标题】：CSS transition for new div created with javascript使用 javascript 创建的新 div 的 CSS 过渡
【发布时间】：2021-07-05 09:07:01
【问题描述】：

我的目标是创建一个 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";

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

【问题讨论】：

标签： javascript css css-transitions

【解决方案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' 属性。如果您不添加此动画，则此动画将不会持续存在

【讨论】：

非常感谢！

【解决方案2】：

我刚刚找到了异步函数和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();

【讨论】：

【解决方案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>

【讨论】：

【解决方案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）更改为新值，并且不需要延迟。

【讨论】：