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“淡出”。

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

Blur + Opacity文本动画在Google Chrome浏览器中闪烁

1 个答案: