Przejście filtru CSS

Question

Moje zapytanie to: Za każdym razem, gdy pierwszy raz naciśniesz dowolny przycisk, obraz powraca do wybranego filtra w 4 sekundy. Ale kiedy naciśniesz inny przycisk, przejście następuje bezczynnie, bez 4 sekund. Jak mogę zmienić obraz w 4 sekundy za każdym razem, gdy naciskam przyciski ?.

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

Nie znałem tego przed tym pytaniem, więc dziękuję za uwagę.

---

Aby móc przechodzić z jednego do innego filtra, trzeba mieć tę samą listę <filter_function> wewnątrz deklaracji stylu między państwami.

Wydaje się, że w przeciwnym razie przeglądarka nie zrobi przejście, nawet jeśli zmusić do powrotu do none ...

Więc rozwiązaniem jest zawsze deklarować wszystkie swoje <filter_functions> i po prostu ustawić swój argument 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>

---

nie sprawdził całkowicie przyczyny leżące jeszcze, ale z szybkiego czytania this, powiedziałbym, że przeglądarka będzie w stanie korzystać z poprawną interpolację pomiędzy sam numer filtry, ale nie na różne.

Jak to jest możliwe, aby ustalić pierwsze przejście z none do dowolnego filtra?
Jeszcze jedna tajemnica ...

Answer 2

Dla mnie problemem jest to, że przyciski nie mogą transitate od skali szarości (100%) do nieokreślonym stanie. powinieneś spróbować swój kod za pomocą parametrów stylu 3 na poszczególnych przycisków, Ex:

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

Mam nadzieję, że pomoże.