Question

我的查询是：每当我第一次按任何按钮时，图像会在4秒内成功转换到所需的过滤器。但是当我按下另一个按钮时，转换会在没有4秒的情况下立即发生。每次按下按钮，如何在4秒内更改图片？

＆＃13;

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)";
}

＆＃13;

#blur {
  transition-duration: 4s;
}

＆＃13;

<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>

＆＃13;

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>

我还没有完全检查根本原因，但是从快速阅读this开始，我会说浏览器能够在相同的过滤器之间使用正确的数字插值，但是不能使用不同的过滤器。

现在如何计算从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)";
}

希望我能提供帮助。

CSS过滤器转换

2 个答案: