如何防止滤镜过渡结束时出现闪光：模糊效果？
（我使用的是铬）
下面的片段显示了问题。
$(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
$(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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
