CSS過濾器轉換

Question

我的疑問是：每當我第一次按任何按鈕時，圖像都會在4秒內成功轉換到所需的過濾器。 但是當我按下另一個按鈕時，轉換會在沒有4秒的情況下立即發生。 每次按下按鈕，如何在4秒內更改圖片？

 function change_image() { document.getElementById("blur").style.filter = "sepia(1)"; } function change_image_2() { document.getElementById("blur").style.filter = "grayscale(100%)"; } function change_image_3() { document.getElementById("blur").style.filter = "blur(5px)"; } 

 #blur { transition-duration: 4s; } 

 <div id="blur"> <img src="http://placehold.it/300" alt="whatever" height="400" width="300"> </div> <br> <button class="btn btn-success" type="button" onclick="change_image()">Sepia</button> <button class="btn btn-success" type="button" onclick="change_image_2()">Grayscale</button> <button class="btn btn-success" type="button" onclick="change_image_3()">Blur</button> 

Answer 1

為了能夠從一個過濾器轉換到另一個過濾器，您需要在狀態之間的樣式聲明中包含相同的<filter_function>列表。

似乎否則瀏覽器不會進行轉換，即使你強行回歸也none ...

因此，解決方案是始終聲明所有<filter_functions> ，並將其參數設置為0 。

 function change_image() { document.getElementById("blur").style.filter = "sepia(1) grayscale(0%) blur(0px)"; } function change_image_2() { document.getElementById("blur").style.filter = "sepia(0) grayscale(100%) blur(0px)"; } function change_image_3() { document.getElementById("blur").style.filter = "sepia(0) grayscale(0%) blur(5px)"; } 

 #blur { transition: all 4s; } 

 <div id="blur"> <img src="http://placehold.it/300" alt="whatever" height="400" width="300"> </div> <br> <button class="btn btn-success" type="button" onclick="change_image()">Sepia</button> <button class="btn btn-success" type="button" onclick="change_image_2()">Grayscale</button> <button class="btn btn-success" type="button" onclick="change_image_3()">Blur</button> 

---

我還沒有完全檢查其根本原因，但是從快速讀取這個 ，我會說瀏覽器能夠在相同的過濾器之間使用正確的數字插值，但不會使用不同的過濾器。

現在，它如何能夠完成none過濾到任何過濾的第一次過渡？
還有一個謎......

Answer 2

對我來說，問題是您的按鈕無法從灰度（100％）過渡到未定義狀態。 你應該使用每個按鈕上的3個樣式參數來嘗試你的代碼，例如：

function change_image() {
    document.getElementById("blur").style.filter = "sepia(1)";
    document.getElementById("blur").style.filter = "grayscale(0%)";
    document.getElementById("blur").style.filter = "blur(0px)";
}

希望我能幫忙。