模糊+不透明度文本动画在 Google Chrome 浏览器中闪烁

Question

所以有一个小功能可以逐字创建文本动画，但是在每个单词动画结束时它会闪烁（例如不透明度 1-0-1 在一秒钟内跳转），我尝试自己修复它并想通了由于某种原因，该 chrome 不喜欢 filter: blur(0) （0 或任何低数字）。 有什么提示可以解决吗？因为在 Firefox 和 Opera 中一切正常。

function fadeIn(quoteSpans) {
    Array.prototype.forEach.call(quoteSpans, function(word) {
        let animate = word.animate([{
                opacity: 0,
                filter: "blur(3px)"
            },{
                opacity: 1,
                filter: "blur(0px)"
            }],
            {
                duration: 1000,
                delay: delay,
                fill: 'forwards'
            }
        );
        delay= delay+300;
    })
}

Answer 1

您的代码在技术上是正确的，但是您看到的问题是浏览器无法正确实现新功能。

这并不是说浏览器在这方面做得不好，但一天的人力只有这么多，而且添加的每个功能都必须在多个硬件平台上运行，并且有可能破坏已经存在的功能。

在我的计算机上，您的动画在 chrome 上运行良好，通常是不同的显卡驱动程序/硬件导致此类错误。

所以基本上你有 3 个选项。你可以open a bug report on chrome 等待他们修复它。

您可以找出导致浏览器失败的硬件配置，并要求您的客户不要使用该配置（显然是个坏主意）。

或者您必须跳出框框思考并找出导致浏览器失败的原因。然后想办法在不触发错误的情况下达到同样的效果。

在您的示例中，我会做出一个有根据的猜测，即同时设置模糊和更改不透明度对于您的浏览器来说太难处理了。

因此，也许您可​​以做的不是将两种效果添加到同一个文本元素，而是将模糊动画放在文本上，并在文本上放置一个白色 div。

将您的文本不透明度保留为 1，但将白色 div 从 1 淡出到 0。然后用户将看到文本“淡入”作为文本“淡出”上方的 div。

这将防止浏览器不得不处理同一元素上的不透明度和模糊，并且可能会解决您的问题。