CSS过滤器过渡 [英] CSS-filter transition

问题描述

我的查询是:每当我第一次按下任何按钮时，图像都会在4秒钟内成功过渡到所需的滤镜.但是，当我按下另一个按钮时，转换过程将立即发生，而无需4秒钟.每次按下按钮时，如何在4秒内更改图片?

my query is : Whenever I press any button for the first time, the image successfully transitions to the desired filter in 4 seconds. But when I press another button the transition takes place immidiately without 4 seconds. How do I make the picture change in 4 seconds everytime I press the buttons?.

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>

推荐答案

要能够从一个过滤器过渡到另一个过滤器，您的样式内必须具有相同的< filter_function> 列表国家之间的声明.

To be able to transition from one filter to an other, you need to have the same <filter_function> list inside your style declaration between the states.

看来，即使您强迫回到 none ...

It seems that otherwise browsers won't do the transition, even if you force to come back to none...

因此解决方案是始终声明所有< filter_functions> ，并将其参数设置为 0 .

So the solution is to always declare all your <filter_functions>, and just set their argument to 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>

我还没有完全检查出根本原因，而是通过快速阅读，我想说的是，浏览器将能够在相同的过滤器之间使用正确的数字插值，但不能使用不同的数字插值.

I didn't checked completely the underlying reasons yet, but from fast-reading this, I would say that browsers would be able to use a correct number interpolation between same filters, but wouldn't with different ones.

现在如何计算出从 none 到任何过滤器的第一个过渡?
还有一个谜...

Now how is it able to work out the first transition from none to any filter ?
One more mystery...

这篇关于CSS过滤器过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！