Dies wird wie eine seltsame Möglichkeit, dies zu tun, aber ich mache eine Cordova-App und macht es so für mich konsistent über alle Plattformen hinweg.transform3d abgehackt, wenn die mobile Tastatur angezeigt wird
Ich versuche, eine Box zu gleiten, die eine Textur wie die Tastatur enthält gleitet nach oben:
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";
Dies setzt es genau dort, wo es sein muss, aber aus irgendeinem Grund die Animation ist sehr abgehackt auf dem Weg nach oben. Ich mache so ziemlich das gleiche, wenn die Tastatur weggeworfen wird (um es wieder dorthin zu bringen, wo es sein sollte), und auf dem Weg nach unten ist es super glatt.
Ich dachte über eine CSS-Animation erstellen und das Ende transform3d dynamisch festlegen, aber ich bin mir nicht sicher, ob es etwas beheben wird. Irgendwelche Gedanken? Vielen Dank!