显示移动键盘时转换3d断断续续

transform3d choppy when mobile keyboard is shown

本文关键字：3d 断断续续 转换 移动 键盘 显示      更新时间：2023-09-26
这

看起来是一种奇怪的方法，但我正在制作一个 cordova 应用程序，这样做可以让我在所有平台上保持一致。

当键盘向上滑动时，我正在尝试向上滑动一个包含纹理的框：

var windowHeight = window.innerHeight;
var keyHeight = e.keyboardHeight;
var topBarHeight = (windowHeight * .11); //All my top bars are 11vh
var transformHeight = Math.floor((keyHeight / windowHeight) * 100);
textContainer.style.transform = "translate3d(0, -" + transformHeight + "vh , 0)";
textContainer.style.transition = "transform 2s ease-out";

这是把它放在需要的地方，但由于某种原因，动画在上升的过程中非常不稳定。当键盘被关闭时，我做了几乎同样的事情（把它放回它应该在的地方），并且在下降的过程中它非常流畅。

我想过创建一个 css 动画并动态设置结束 transform3d，但我不确定它是否会解决任何问题。有什么想法吗？谢谢！

所以我所做的是将所有这些放在一个函数中，并进行window.setTimeout调用并将计时器设置为 0 .这里解释得很好。

相关文章：