CSS轉換：用JavaScript觸發

我以前問過關於用JavaScript觸發CSS轉換的問題& setTimeout（JavaScript: Trigger CSS Transition with window.setTimeout）。這個問題試圖獲得更多的信息。CSS轉換：用JavaScript觸發

我有變化的內容和消失在paragrapn p#test功能：

function test() { 
    var done=false; 
    var p=document.querySelector('p#test'); 
    window.setInterval(doit,4000); 
    var data=0; 

    function doit() { 
     p.removeAttribute('on'); // 1 
     p.offsetHeight;    // 2 force update 
     p.innerHTML=data++;   // 3 
     p.setAttribute('on',null); // 4 
    } 
}

的CSS是：

p#test { 
    opacity: 0; 
} 
p#test[on] { 
    transition: opacity 1s; 
    opacity: 1; 
}

我注意到transition財產必須在p#test[on]設置規則。如果設置爲p#test規則，則不起作用。

我發現上面的步驟2 & 3可以互換。

不過，我不能得到它的工作在所有如果我嘗試在JavaScript中單獨設置的屬性：

function doit() {  // DOES NOT WORK 
    p.style.opacity=0; 
    p.offsetHeight; 
    p.innerHTML=data++; 
    p.style.opacity=1; 
}

所以，我的結論是：

更改屬性（或類）在JavaScript中將觸發CSS轉換
在JavaScript中更改CSS屬性將而不是觸發轉換
只有在觸發規則中的transition屬性處於觸發狀態時，纔會觸發轉換。

對不起，長序言。問題是：

準確什麼 JavaScript實際上會觸發CSS轉換？它只是一個類或屬性的改變，還是會有其他工作？

我加入這裏小提琴：https://jsfiddle.net/comparity/a7qt297m/

來源

2016-09-27 Manngo

請問您可以在https://jsfiddle.net/上粘貼您的示例嗎？ – TylerY86

@ TylerY86完成。見上面... – Manngo

所以你說'doit2'不會觸發轉換，即使'transition：opacity 1s;'在'p＃test'規則中？ – TylerY86

愚蠢的問題，但它的基本元素（p#test）也有它的過渡性質？在您的示例代碼中，transition屬性僅用於「on」狀態。

如果不是這樣，那可能是因爲您在同一個函數中立即將不透明度從0改爲1。查看一個小小的setTimeout是否可以對不透明度= 1行產生影響。

來源

2016-09-27 05:02:22

在我的測試中，如果我將'transition'放在基本元素上，它不起作用。我不知道爲什麼。至於變化，只要我包含'p.offsetHeight'（或者任何其他已知觸發佈局的語句），就可以完美地工作。 – Manngo

CSS轉換：用JavaScript觸發

回答

相關問題