使输入框从左或右滑入

here is my code: https://jsfiddle.net/hsf4yo5t/

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

HTML code:

HTML代码：

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

CSS code:

CSS代码：

#my-input {
  visibility: hidden;
}

Javascript code:

Javascript代码：

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

when I click the button, it shows. but how can i make it slide out using javascript OR jquery?

当我点击按钮时，显示。但是如何使用javascript或jquery将其滑出？

3 个解决方案

#1

If you don't mind wrapping the input in an element, you can transition translateX() to make it slide out.

如果您不介意将输入包装在元素中，则可以转换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>

You can also transition scaleX() without a wrapping element around the input, but it isn't really sliding as much as contracting/expanding from the left side.

您也可以在输入周围没有包裹元素的情况下转换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">

#2

Here's a jQuery solution: It animates the opacity and the left parameter, which initially is set to a (negative) value so that the input field is off the screen (you have to use position: relative to make that possible):

这是一个jQuery解决方案：它动画不透明度和左参数，最初设置为（负）值，以便输入字段不在屏幕上（你必须使用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">

Right to left would be:

从右到左是：

$("#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">

#3

Here's a jQuery option selecting by input. (you can switch back to selecting by class)

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

The 'squeeze' at the end may be annoying.

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

fiddle

小提琴

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

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>

---

Centered

中心

This one expands from center. The submit button appears when the last empty field is focused on.

这个从中心扩展。当最后一个空字段被聚焦时，将出现提交按钮。

fiddle

小提琴

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

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>