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 会从 JavaScript 获取 opacity value 1 和 display 属性以 block。它显示在假定位置的下方和左侧，然后移动到实际位置。

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

-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 成为属性而不是选项，但（目前）它没有移动硬件加速（移动从那时起，设备和浏览器都得到了改进）——它不会影响你的属性——它仍处于测试阶段，而我正在消除一些错误并确保它的质量足够好！