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任何过滤器到任何过滤器的第一次转换？
又一个谜……