translate3d 使元素跳跃

Question

我使用 transform 的 translate3d 将弹出窗口 div 在容器中居中。

//CSS
element
{
    display: none;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

//JS
    $btn.click(function(){
         $popupContainer1.velocity({ opacity: 1}, { display: "block"});
    });

在桌面浏览器中，它工作正常，但在移动浏览器中，它会跳转。当用户单击按钮时，弹出窗口 div 获得 不透明度值 1 和显示属性到 从 JavaScript 屏蔽 。它显示在假定位置的下方和左侧，然后移动到实际位置。

我尝试按照 Whosebug 中许多帖子中的建议应用以下代码片段进行改进，但没有成功。

-webkit-backface-visibility: hidden;

单击弹出容器上的关闭按钮由以下函数处理。

$rdCloseBtn.click(function(){
        $rdPopupElements.velocity({ opacity : 0 }, {
            display : 'none',
            mobileHA: false
        });
        setDefault();
    });

我用下面的代码重置了动画。

function setDefault(id){
        if (id === 0) {
            $rdPopupElement0.velocity({ opacity : 0 }, 0);
            $rdPopupElement_0_Text.velocity({ opacity : 0 }, 0);
            $rdPopupElement0Clock.velocity({ opacity : 0 }, 0);
            $rdJumpingArrow.velocity({ opacity : 0 }, 0);
            $rdClockingArrow0.velocity({ opacity : 0 }, 0);
            $rdClockingFiller0.velocity({ opacity : 0 }, 0);
            $rdClockingArrow1.velocity({ opacity : 0 }, 0);
        }
        else if (id === 1) {
            $rdPopupElement1.velocity({ opacity : 0 }, 0);
            $rdRS0.velocity({ opacity : 0 }, 0);
            $imgClipBoardClock.velocity({ opacity : 0 }, 0);
            $rdRS1.velocity({ opacity : 0 }, 0);
            $rdTick0.velocity({ opacity : 0 }, 0);
            $rdTick1.velocity({ opacity : 0 }, 0);

            $rdPopupElement_1_Text.velocity({ opacity : 0 }, 0);
            $rdClipboardClock.velocity({ opacity : 0 }, 0);
        }
        else if (id === 2) {
            $rdPopupElement2.velocity({ opacity : 0 }, 0);
            $rdMaginifier.velocity({ opacity : 0 }, 0);
            $rdRedDot.velocity({ opacity : 0 }, 0);
            $rdMagFiller.velocity({ opacity : 0 }, 0);
            $rdArrowFlow.velocity({ opacity : 0 }, 0);
            $rdPopupElement_2_Text.velocity({ opacity : 0 }, 0);
        }

        else {
            setDefault(0);
            setDefault(1);
            setDefault(2);
        }

    }

Answer 1

那是在使用 Velocity v1 - 这在 transform 方面并不是最好的，因为在移动设备上它试图与 transform 属性本身混淆，并且我有一种感觉，这正在发生。至少尝试向其中添加选项 mobileHA: false，看看是否有帮助。

否则，也许可以尝试使用 Velocity v2 beta（查看 github 页面了解详细信息），display 成为属性而不是一个选项，但是它（目前）没有移动硬件加速（移动设备和浏览器从那时起已经改进） - 它会让你的财产单独存在 - 它仍处于测试阶段，同时我正在解决一些错误并确保它足够好质量虽然！

translate3d 使元素跳跃

translate3d makes element jump

css

velocity.js

translate3d