1

This is going to look like an odd way to do this, but I'm making a cordova app and doing it this way allows for me to be consistent across all platforms.

I'm trying to slide up a box that contains a texture as the keyboard is sliding up:

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";

This is putting it exactly where it needs to be, but for some reason the animation is very choppy on the way up. I do pretty much the same thing when the keyboard is dismissed(to put it back where it should be), and on the way down it's super smooth.

I thought about creating a css animation and setting the end transform3d dynamically, but I'm not sure if it will fix anything. Any thoughts? Thanks!

Kody R.
  • 2,430
  • 5
  • 22
  • 42

1 Answers1

1

So what I did to combat this was put all of that inside a function and have a window.setTimeout call and set the timer to 0. It's all explained pretty well here.

Community
  • 1
  • 1
Kody R.
  • 2,430
  • 5
  • 22
  • 42