Question

您如何在我的网站上制作一个可点击的按钮，该按钮会变为<input>字段并带有<submit>按钮？单击按钮后，我希望它向右滑动，然后文本输入表单将出现在它旁边。我不知道我是否应该使用CSS或JavaScript。有什么帮助吗？

Answer 1

Demo Fiddle 这不完美，只是一个起点，但基本前提可能是：

HTML

<form>
    <button>Slide In!</button>
    <div>
        <input type='text' />
        <input type='submit' />
    </div>
</form>

CSS

form {
    position:relative;
}
form div {
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    overflow:hidden;
    transition:all 1s ease-in;
}
form div.active {
    left:0;
}

的jQuery

$('button').on('click', function (event) {
    event.preventDefault();
    $('form div').addClass('active');
});

Answer 2

带标签，焦点和转换CSS可以做一些非常接近问题的事情： http://codepen.io/anon/pen/gualw/

form {
  line-height: 1.7em;
}

label {
  /* make it look like a button */
  width: 4em;
  float: left;
  overflow: hidden;
  margin: 0.25em;
  box-shadow: 0 0 0 1px;
  border-radius: 5px;
  line-height: 1.2em;
  text-align: center;
  background: #4285F4;
  margin-left: 0;
  transition: 0.5s;
}

input {
  float: left;
  clear: left;
  margin: 0.25em 0.25em 0.25em -50%;
}

input:focus {
  transition: 0.5s;
  margin: 0.25em 0;
}

input:focus+label {
  margin-left: -50%;
  transition: 0.5s;
}

<form>
  <input id="ipt1" />
  <label for="ipt1"> input 1 </label>
  <input id="ipt2" />
  <label for="ipt2"> input 2 </label>
  <input id="ipt3" />
  <label for="ipt3"> input 3 </label>
</form>

Answer 3

你可能会做这样简单的事情......将宽度从0动画到某个值......

<强> HTML

<input type="text" id="input-txt">
<input type="button" id="input-btn" value="Go">

<强> CSS

#input-txt {
    width: 0;
    transition: width 1s ease-in;
}

#input-txt.active {
    width: 250px;
}

比特o＆＃39; JS

document.getElementById('input-btn').addEventListener('click', function () { document.getElementById('input-txt').classList.add('active'); });

<强> DEMO

Answer 4

您需要结合使用CSS和Javascript才能实现此目标

在设计中，通过css

制作文本框display = none

将JS单击事件绑定到按钮（JQuery是更好更快的选项）并设置textbox display = block。要设置动画，请使用Jquery动画或任何预设动画来显示文本框。外观依赖于你的CSS风格

查看此thread以获取更多见解

Answer 5

您将使用两者的组合。 CSS用于制作动画和JavaScript以创建触发这些动画的功能。一个好的起点是onClick事件。

单击HTML / CSS按钮更改为输入字段和提交按钮

5 个答案: