Question

我使用transform的translate3d将popup 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获取不透明度值 1和显示属性为阻止。它显示在假定位置的下方和左侧，然后移动到实际位置。

我尝试使用以下代码段进行改进，如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成为一个属性而不是一个选项，但是那里（当前）没有移动它上面的硬件加速（移动设备和浏览器从那时起已经有所改进） - 并且它会让你的属性独自出现 - 它仍处于测试阶段，同时我还要解决一些错误，并确保它的质量足够好！

translate3d使元素跳转

1 个答案: