在模糊过渡时如何防止图像闪烁？ [英] How to prevent image flash when transitioning with blur?

问题描述

如何防止滤镜过渡结束时出现闪光：模糊效果？
（我正在使用Chrome）
下面的代码段显示了问题。

How to prevent flash on end of transition on filter: blur effect? (I'm using chrome) Snippet below to show problem.

$(window).on('load',function( event ){
  setTimeout(function(){
    $('.sec').addClass('active')
  },1000)
})

.sec {
  margin: 0 auto;
  width: 700px;
  height: 500px;
  background-image: url(http://placekitten.com/700/500);
  background-size: cover;
  
    -webkit-filter: blur(20px);
	  -moz-filter: blur(20px);
	  -o-filter: blur(20px);
	  -ms-filter: blur(20px);
	  filter: blur(20px);
}
.sec.active {
  -webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-o-filter: blur(0px);
	-ms-filter: blur(0px);
	filter: blur(0px);
	transition: all 3s ease, transform 1s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sec">
  
</div>

推荐答案

一个主意是避免 blur 变为0，您可以考虑使用 0.5px

An idea is to avoid the blur to go to 0, you may consider a value close like 0.5px

$(window).on('load', function(event) {
  setTimeout(function() {
    $('.sec').addClass('active')
  }, 1000)
})

.sec {
  margin: 0 auto;
  width: 700px;
  height: 500px;
  background-image: url(http://placekitten.com/700/500);
  background-size: cover;
  filter: blur(20px);
}

.sec.active {
  filter: blur(0.5px);
  transition: all 3s ease, transform 1s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sec">

</div>

这篇关于在模糊过渡时如何防止图像闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！