CSS滤镜转换

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

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>

来源

2017-06-14 Goldensquare

我不知道为什么动画过渡只能工作一次，但至少我可以说你应该细化你的功能。如果你有200个过滤器，你会重复200次相同的功能吗？不，只写一个并将过滤器作为参数传递：'function change_image（filter）{document.getElementById（“blur”）。style.filter = filter; }'并且这样调用它：'onclick =“change_image（'sepia（1）'）”'，'onclick =“change_image（'灰度（100％）'）”' –

我在这个问题之前并不知道，所以谢谢你的注意。

为了能够转变从一个过滤器的其他，你需要有国家之间的风格声明中同样<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到任何过滤器的第一个转换？
还有一个谜团......

来源

2017-06-14 06:52:28 Kaiido

谢谢大家指出。没有跨过我的脑海。 :) – Aslam

@hunzaboy，实际上听起来很奇怪。 – Kaiido

对我来说，问题是，你的按钮不能从灰度（100％），以不确定的状态transitate。你应该使用每个按钮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)"; 
}

希望我会帮。

来源

2017-06-14 06:49:05

CSS滤镜转换

回答

相关问题