javascript - 使输入框从左或右滑入

Question

这是我的代码:https://jsfiddle.net/hsf4yo5t/

HTML代码:

<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">

CSS 代码:

#my-input {
  visibility: hidden;
}

Javascript 代码:

document.getElementById('my-button').onclick = function() {
    document.getElementById('my-input').style.visibility = 'visible';
}

当我点击按钮时，它会显示。但是我怎样才能使用 javascript 或 jquery 让它滑出呢？

Answer 1

如果您不介意将输入包装在一个元素中，您可以转换 translateX() 以使其滑出。

document.getElementById('my-button').onclick = function() {
	document.getElementById('my-input').classList.toggle('show');
}

span {
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

#my-input {
  transform: translateX(-100%);
  opacity: 0;
  transition: opacity .25s, transform .25s;
}

#my-input.show {
  transform: translateX(0);
  opacity: 1;
}

<input type="button" id="my-button" value="Show text input">
<span class="span"><input type="text" id="my-input"></span>

您也可以转换 scaleX() 而无需环绕输入的元素，但它实际上并没有像从左侧收缩/扩展那样滑动。

document.getElementById('my-button').onclick = function() {
	document.getElementById('my-input').classList.toggle('show');
}

#my-input {
  transform: scaleX(0);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  transform-origin: 0 0;
}

#my-input.show {
  transform: scaleX(1);
  opacity: 1;
}

<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">