填写所有必需的输入后按钮滑动答案

【问题标题】：Button slide after fill all required inputs填写所有必需的输入后按钮滑动
【发布时间】：2019-07-22 00:13:23
【问题描述】：

我有一个带有经典文本框和文本区域的表单。所有输入都是必需的。我只想在填写此字段时显示提交按钮。提交按钮必须是动画的（从右侧滑动）。

谁能帮帮我？

【问题讨论】：

欢迎来到 Stack Overflow。当您卡在代码中而不提供代码或外部资源时，我们随时为您提供帮助。如果您已经开始编码，请编辑您的问题并添加您的代码，有人可以提供帮助。
您能否向我们展示您的代码到目前为止的样子并指出您最困扰的问题，以便我们首先提供帮助？

标签： javascript html css animation dom-events

【解决方案1】：

let formObj = document.querySelector('#my-form');
let emailObj = document.querySelector('#email');
let passObj = document.querySelector('#password');
let submitObj = document.querySelector('#showBtn');

formObj.addEventListener('keyup', function(e){ 
  if(emailObj.value === '' || passObj.value === ''){
     document.querySelector('#showBtn').style.right="-300px";
  }else{
     document.querySelector('#showBtn').style.right="40%";
  }
});

submitObj.addEventListener('click', function(e){
  e.preventDefault();
 alert('do somthing')
});

#container{
position: relative;
width:80%;
margin: 10px auto;
}
#btn-container button{
  position: absolute;
  right: -300px;
  transition: 1s;
  padding: 10px;
  width: 100px;
  font-size: 20px;
  color: white;
  border-radius: 5px;
}

#showBtn {
  top: 30px;
  background-color: #4CAF50;
}

<div id="container">
   <form id="my-form">
     <input id="email" type="email">
     <input id="password" type="password">
     <div id="btn-container"><button id="showBtn">Submit</button> </div>
   </form>
</div>

【讨论】：

【解决方案2】：

你可以试试这个。希望对你有帮助。

var text = document.querySelector('input[type="text"]');
var textarea = document.querySelector('textarea');
var btn = document.querySelector('input[type="submit"]');

function btnShow () {
  if (text.value != "" && textarea.value != "") {
    btn.style.left = 0;
  } else {
    btn.style.left = "-40%";
  }
}

text.addEventListener('keyup', btnShow);
textarea.addEventListener('keyup', btnShow);

form {
  position: relative;
}

input[type="submit"] {
  position: relative;
  bottom: 0;
  left: -9.5%;
  transition: all .2s ease-in-out;
}

<form>
<input type="text" required> <br><br>
<textarea required></textarea> <br><br>
<input type="submit" value="submit">
</form>

【讨论】：