应用过滤器的元素上的平滑不透明度过渡答案

【问题标题】：smooth opacity transition on an element with a filter applied应用过滤器的元素上的平滑不透明度过渡
【发布时间】：2014-03-11 05:14:48
【问题描述】：

所以我有一个应用了模糊滤镜的 DIV。我试图在一秒钟的过渡中使用 CSS 不透明度（0 到 1）“淡入”DIV。 DIV 确实会淡入，但非常有问题。我尝试增加过渡时间，但它仍然在模糊状态之间出现故障。知道如何平滑这种过渡吗？这是我正在使用的代码：

SVG 代码：

<svg>
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="15" />
</filter>
</svg>

CSS 代码：

#testdiv
{
background: url('images/background-buildpresentation.jpg') fixed;
border-radius: 30px;
color: white;
filter: url(#blur-effect-1);
font-family: arial;
font-size: 40px;
height: 80%;
left: 10%;
opacity: 0;
position: absolute;
top: 10%;
transition: all 1s;
width: 80%;
}

HTML 代码：

<div id="testdiv">Display some text here</div>

JavaScript 创建过渡：

setTimeout(function(){testdiv.style.opacity="1"},2000);

这可能只是浏览器的限制。我目前正在 Firefox 27 中进行测试。提前致谢。

道格

【问题讨论】：

标签： javascript css svg filter transition

【解决方案1】：

15 的 stdDeviation 非常大。这相当于模糊半径为 45。这意味着对于 div 中的每个像素，它执行 4 x (45 + 45)^2 乘法。对于占页面 80% 的 div（我从你的 CSS 猜测），可能是 800 x 800 x 4 x 90^2。假设我的数学是正确的，那就是不透明度转换的每一步超过 200 亿次计算。即使使用图形硬件，也可能不会那么顺利。

有可能的替代方案。您可以将模糊的 div 绘制到画布中，然后将其淡化。见

converting div and its associated elements to canvas jquery?

或

http://html2canvas.hertzen.com/

【讨论】：