使输入框从左或右滑入

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