css - 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 获得 opacity 值 1 和 display 属性以阻止 JavaScript。它显示在假定位置的下方和左侧，然后移动到实际位置。

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

-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 成为属性而不是选项，但(目前)没有移动硬件它的加速(移动设备和浏览器从那时起得到了改进) - 它会让你的属性单独存在 - 它仍处于测试阶段，同时我正在解决一些错误并确保它的质量足够好!