在創建後創建HTML元素和動畫

我正在構建疊加層（模態或對話框的背景），我希望它在創建元素時淡入。我通過使用CSS3轉換向元素添加/刪除.visible類來執行動畫。在創建後創建HTML元素和動畫

# SASS styles 
.overlay { 
    background-color: rgba(0, 0, 0, 0.6); 
    cursor: pointer; 
    height: 100%; 
    left: 0; 
    position: fixed; 
    pointer-events: none; 
    top: 0; 
    width: 100%; 
    will-change: opacity; 
    @include transparency(0); 
    @include transition(opacity 0.3s cubic-bezier(0, 0, 0.3, 1)); 

    &.visible { 
    pointer-events: auto; 
    @include transparency(1.0); 
    } 
}

當疊加元素的DOM已經存在，一切都運行得很好：

$(".overlay").addClass("visible") # => does animation as expected...

但是，當我創建的元素，然後嘗試製作動畫，這不：

# JavasScript using jQuery 
tag = $("<div class='overlay'></div>") 
$("body").append(tag) 
tag.addClass("visible")

我知道這是因爲JavaScript正在創建和添加類「即時」，所以我要做的是：

tag = $("<div class='overlay'></div>") 
$("body").append(tag) 
tag.hide() 
tag.show() 
tag.addClass("visible")

通過「隱藏」，然後「顯示」該元素，它有足夠的時間讓add類爲該元素設置動畫。

問題這似乎很哈哈顯示/隱藏一個元素，所以我可以通過CSS過渡動畫。有沒有一個更清晰的方式來實現這個？

來源

2016-11-03 Dan L

如果您執行'tag = $（「

」）'會發生什麼？ –

試過了......只是顯示，沒有動畫。似乎瀏覽器自動應用'.visible'動畫。 –

「清潔」是在旁觀者的眼睛，但一個簡單的方法就是等待蜱添加可見課前：

$("body").append(tag); 
setTimeout(function() { 
    tag.addClass("visible"); 
}, 0);

這會等到追加是加入前完成類。您可能需要將0值調高。

來源

2016-11-03 20:37:07

同意「清潔」往往是主觀的。我並不真的「喜歡」使用全局超時，但它和hacky的'.hide（）。show（）'方法一樣乾淨。希望HTML/CSS有一些我可以設置的屬性/屬性，可以讓我在給定的命令上進行動畫處理，而不是將類應用到它上面......我懷疑在接下來的幾年裏會發生類似情況，比較普遍;普遍上。 –

在創建後創建HTML元素和動畫

回答

相關問題