使用 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 ）更改為新值，並且不需要延遲。