时间戳

首页 > 解决方案 > 模糊+不透明度文本动画在 Google Chrome 浏览器中闪烁

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

问题描述

因此，有一个小功能可以逐字创建文本动画，但是在每个单词动画结束时它会闪烁（例如不透明度 1-0-1 在一秒钟内跳转），我尝试自己修复它并找出了 chrome for某些原因不喜欢 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;
    })
}

标签： javascriptgoogle-chromeanimationcross-browser

解决方案

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

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

在我的电脑上，你的动画在 chrome 上运行得很好，通常是不同的显卡驱动程序/硬件导致了这样的错误。

所以基本上你有3个选择。您可以在 chrome 上打开错误报告并等待他们修复它。

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

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

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

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

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

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

推荐阅读