Question

我已经从应用程序中找到了一个很好的效果，它需要多个UI元素，但也需要尽可能多的屏幕空间。

效果的想法是，一旦你将鼠标移离它们，UI按钮几乎消失。
我已经制作了jsFiddle，以防你想看到它。

这很简单：

window.addEventListener("mousemove", function(e) {
    var rect = element.getBoundingClientRect();
    //Measuring distance from top-left corner of the div
    var top = rect.top+(rect.bottom-rect.top)/2;
    var left = rect.left+(rect.right-rect.left)/2;
    //Mouse position
    var x = e.clientX;
    var y = e.clientY;
    //Thank pythagoras for this
    var distance = Math.sqrt(Math.pow(x-left, 2)+Math.pow(y-top, 2));
    //Brightness in interval <1, 0.1>

    var brightness = Math.min(1, Math.max(0.1, 100/distance));

    element.style.opacity = brightness+"";  

});

这个jsFiddle也应该证明我有问题 - 但它运行得非常顺利。

问题是，如果它们过于频繁，浏览器似乎会缓冲CSS更改。这是一个非常聪明的性能策略，但就我而言，它确实打破了效果。

我还上传了test script here.在谷歌浏览器中，缓冲似乎非常强大（并且不同步），按钮有时会闪烁。

我应该实现一些帧跳过，以便浏览器缓冲区不是由动画效果启动的吗？

_{我的按钮的底部边框被切掉了。如果你知道为什么会这样，请在评论中告诉我}

我可以阻止浏览器缓冲CSS更改吗？

0 个答案: