使输入框从左或右滑入

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

Answer 2

这是一个 jQuery 解决方案：它为 opacity 和 left 参数设置动画，该参数最初设置为（负）值，以便输入字段不在屏幕上（您必须使用 position: relative 来制作可能）：

$("#my-button").click(function() {
  $("#my-input").animate({
    'left': '0px',
    'opacity': '1'
  });
});

#my-input {
  position: relative;
  left: -300px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">

从右到左是：

$("#my-button").click(function() {
  $("#my-input").animate({
    'right': '0px',
    'opacity': '1'
  });
});

#my-input {
  position: relative;
  right: -1600px;
  opacity: 0;
}

body {
  overflow-x: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">

Answer 3

这是一个通过输入选择的 jQuery 选项。 （可以切换回按班级选择）

最后的“挤压”可能很烦人。

小提琴

https://jsfiddle.net/Hastig/etfzt6fq/

$(".buttonNfield input[type='button']").click(function() {
	$(".buttonNfield input[type='text']").css({
  	'width': '70%',
    'opacity': '1'
  });
})

.buttonNfield {
  display: flex;
  width: 100%; 
}
.buttonNfield input[type="button"] {
  width: 30%;
  margin: 0 10px 0 0;
  cursor: pointer;
}
.buttonNfield input[type="text"] {
  width: 0%;
  overflow: hidden;
  margin: 0;
  padding: 5px;
  transition: width 1.3s ease;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttonNfield">
  <input type="button" value="Show text input">
  <input type="text" placeholder="type here">
</div>

---

居中

这个从中心展开。当关注最后一个空字段时，会出现提交按钮。

小提琴

https://jsfiddle.net/Hastig/rjab85rc/

$(".buttonNfield input[type='button']").click(function() {
	var pseudoThis = $(this).closest('.buttonNfield').find("input[type='text']");
	$(pseudoThis).show( 100, function() {
  	$(pseudoThis).css({
      'display': 'flex',
      'width': '70%',
      'marginLeft': '10px',
      'opacity': '1'
    });
  });
  $(pseudoThis).focus();
})

var totalFields = 0;
var remainingFields;

$(function() {
  $("input[type='text']").each(function() {
   	totalFields = totalFields + 1;
  })
})

$("input[type='button']").on("click", function() {
	// fly in total fields box
})

$("html").on("mouseover", function() {
	remainingFields = totalFields;
  $("input[type='text']").each(function() {
    if ($(this).val() != '') {
      remainingFields = remainingFields - 1;
    }
  })
  if (remainingFields > 0) {
  	$('.remaining').html(remainingFields + ' ' + 'fields remaining');
  } else {
  	$('.remaining').css('opacity', '0');
    // fly in submit button
    $("input[type='submit']").css({
    	'marginLeft': '0',
      'marginRight': '0'
      });
  }
})

$("input[type='text']").on("focus", function() {
	if (remainingFields < 2) {
    $("input[type='submit']").css({
    	'marginLeft': '0',
      'marginRight': '0'
    });
  }
})

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
}
form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%; 
  padding-top: 50px;
}
.buttonNfield {
  display: flex;
  justify-content: center;
  width: 100%; 
  margin: 15px 0;
}
.buttonNfield input[type="button"] {
  width: 30%;
  cursor: pointer;
}
.buttonNfield input[type="text"] {
  display: none;
  width: 0%;
  overflow: hidden;
  transition: width 0.5s ease;
  opacity: 1;
  box-sizing: border-box;
}

.submitNinfo {
  display: flex;
  justify-content: center;
  width: 100%;
}
input[type="submit"] {
  margin: 5px -100% 0px 100%;
  padding: 10px;
  font-size: 20px;
  color: hsla(0, 0%, 70%, 1);
  background-color: hsla(0, 0%, 20%, 1);
  border-style: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 3px;
  cursor: pointer;
  transition: margin 0.6s, background 0.2s;
}
input[type="submit"]:hover {
  background-color: hsla(0, 0%, 0%, 1);
}
.remaining {
  position: fixed;
  top: 10px;
  left: 50%; transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: 100%;
  transition: opacity 1s;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="buttonNfield">
    <input type="button" value="Enter First Name">
    <input type="text" placeholder="type here">
  </div>
  <div class="buttonNfield">
    <input type="button" value="Enter Last Name">
    <input type="text" placeholder="type here">
  </div>
  <div class="submitNinfo">
    <input type="submit" value="submit form">
  </div>
  <div class="remaining"></div>
</form>