Question

我在点击按钮时尝试创建模糊/非模糊转换。

我已经设法让这个工作在基本元素上，但是只要我添加任何类型的定位元素，unblur就会停止工作。我创建了一个jsfiddle来展示这个 http://jsfiddle.net/NLpRy/

我正在使用

-webkit-filter: initial;
filter: initial;

设置初始的“不模糊”状态。

使用定位元素时，过滤器是否存在错误？

注意：我已经尝试了以下代码，尽管它确实有效，但我不能将其用作解决方案，因为它会破坏我在其他地方的其他动画。

-webkit-filter: blur(0);
filter: blur(0);

Answer 1

对我来说看起来像是一个错误，可能会在未来的浏览器版本中得到解决。

与此同时，我使用3d技巧修复了它，转换：translateZ（0px）;

.page {
    -webkit-filter: none;
    filter: none;
    position: relative;
    -webkit-transition: all 3s ease-out;
    -moz-transition: all 1.3s ease-out;
    -o-transition: all 1.3s ease-out;
    transition: all 3s ease-out;
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
}

fiddle

webkit模糊过渡与定位元素

1 个答案: