在改變Edge中的元素類後，過渡不是動畫

我有一個定義了transition屬性的元素。我通過切換課程在兩個州之間進行動畫製作。在改變Edge中的元素類後，過渡不是動畫

但是，在邊緣（40.15063.674.0，EdgeHTML 15.15063）中，如果上一個轉換尚未完成，則轉換不會生成動畫（而是立即改變狀態）。

這是最小的片段。請注意，廣場不應該不連續跳躍。

const div = document.getElementById("div"); 
 
setInterval(() => { 
 
    div.classList.add("translate"); 
 
    setTimeout(() => { 
 
     div.classList.remove("translate"); 
 
    }, 500); 
 
}, 2000);

#div { 
 
    transition: 1000ms; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: red; 
 
} 
 

 
.translate { 
 
    transform: translate(200px, 0); 
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Example</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body> 
 
     <div id="div">Test</div> 
 
    </body> 
 
</html>

我怎樣才能解決這個bug？

我試圖設置transition-property爲建議here，但它沒有幫助。

來源

2017-10-13 Spike

下面的代碼工作正常。在刪除translate類之後，我在#div中添加了translate（0，0）以恢復默認位置。同時結合#div和.translate類來覆蓋CSS。

const div = document.getElementById("div"); 
 
setInterval(() => { 
 
    div.classList.add("translate"); 
 
    setTimeout(() => { 
 
     div.classList.remove("translate"); 
 
    }, 1000); 
 
}, 2000);

#div { 
 
    transition: 1000ms; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: red; 
 
    transform: translate(0, 0); 
 
} 
 

 
#div.translate { 
 
    transform: translate(200px, 0); 
 
}

<div id="div">Test</div>

來源

2017-10-13 11:03:09

在改變Edge中的元素類後，過渡不是動畫

回答

相關問題