Chuyển đổi CSS-filter

Question

truy vấn của tôi là: Bất cứ khi nào tôi nhấn bất kỳ nút nào lần đầu tiên, hình ảnh chuyển thành công thành bộ lọc mong muốn trong 4 giây. Nhưng khi tôi nhấn một nút khác, quá trình chuyển đổi diễn ra một cách không công bằng mà không cần 4 giây. Làm cách nào để thay đổi hình ảnh trong 4 giây mỗi lần tôi nhấn các nút ?.

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

Tôi không biết trước câu hỏi này, vì vậy cảm ơn vì đã chú ý đến nó.

---

Để có thể chuyển đổi từ một bộ lọc để một cách khác, bạn cần phải có cùng một danh sách <filter_function> bên tuyên bố phong cách của bạn giữa các bang.

Dường mà nếu không trình duyệt sẽ không làm quá trình chuyển đổi, ngay cả khi bạn buộc phải trở lại để none ...

Vì vậy, giải pháp là phải luôn luôn khai báo tất cả <filter_functions> của bạn, và chỉ cần đặt tham số của họ để 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>

---

tôi không kiểm tra hoàn toàn những lý do cơ bản, nhưng từ nhanh đọc this, tôi sẽ nói rằng các trình duyệt sẽ có thể sử dụng một số nội suy chính xác giữa cùng bộ lọc, nhưng sẽ không có bộ lọc khác nhau.

Bây giờ, làm cách nào để có thể thực hiện chuyển đổi đầu tiên từ none sang bất kỳ bộ lọc nào?
Một bí ẩn khác ...

Answer 2

Đối với tôi, vấn đề là các nút của bạn không thể transitate từ thang độ xám (100%) đến một trạng thái không xác định. bạn nên thử mã của mình bằng cách sử dụng 3 thông số kiểu trên mỗi nút, ví dụ:

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

Hy vọng tôi sẽ giúp.