CSS濾鏡轉換

我的查詢是：每當我第一次按下任何按鈕時，圖像將在4秒內成功轉換到所需的濾鏡。但是當我按下另一個按鈕時，過渡會立即發生，無需4秒。每次按下按鈕時，如何在4秒內更改圖片？CSS濾鏡轉換

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>

來源

2017-06-14 Goldensquare

我不知道爲什麼動畫過渡只能工作一次，但至少我可以說你應該細化你的功能。如果你有200個過濾器，你會重複200次相同的功能嗎？不，只寫一個並將過濾器作爲參數傳遞：'function change_image（filter）{document.getElementById（「blur」）。style.filter = filter; }'並且這樣調用它：'onclick =「change_image（'sepia（1）'）」'，'onclick =「change_image（'灰度（100％）'）」' –

我在這個問題之前並不知道，所以謝謝你的注意。

爲了能夠轉變從一個過濾器的其他，你需要有國家之間的風格聲明中同樣<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>

我並沒有完全檢查尚未背後的原因，而是從快速閱讀this，我要說的是，瀏覽器將能夠使用它們之間的正確數字插值過濾器，但不會與不同的。

現在怎麼能夠制定從none到任何過濾器的第一個轉換？
還有一個謎團......

來源

2017-06-14 06:52:28 Kaiido

謝謝大家指出。沒有跨過我的腦海。 :) – Aslam

@hunzaboy，實際上聽起來很奇怪。 – Kaiido

對我來說，問題是，你的按鈕不能從灰度（100％），以不確定的狀態transitate。你應該使用每個按鈕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)"; 
}

希望我會幫。

來源

2017-06-14 06:49:05

CSS濾鏡轉換

回答

相關問題