HTML 从按钮到文本输入的转换

Question

我正在为学校项目开发的程序需要帮助，当 type="" 属性从 text 更改为 [=16= 时，我是否可以通过任何方式进行转换]？我已经尝试了 CSS transition: all 样式，但它似乎没有用，而且看起来 jQuery 没有为此内置的功能。我的代码有效，我只是想为 style 添加一个漂亮的过渡。谢谢！

HTML

<div id="submitArea">
    <input id="button" type="button" value="Ready?">
</div>

CSS:

#submitArea{
  position: absolute;
  margin: auto;
  width: 60%;
  height: 50%;
  top: 50%;
  left: 50%;
  border-radius: 0.5rem;
  transform: translate(-50%, -50%);
  background-color:#0084ff;
}

#button{
  position: absolute;
  font-size: 32pt;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  padding: 1.5% 2%;
  border: none;
  border-radius: 0.35rem;
  transition: all;
  transition-duration: 150ms;
}

jQuery

$(document).ready(function(){
  $("#button").click(function(){
    //$("#button").animate({width: '80%'});
    $("#button").attr("type","text")
    $("#button").attr("value", "")
    $("#button").attr("placeholder","Lets do this!")
  });
});

来源： https://repl.it/@raw/wolframdelta

当前预览： https://wolframdelta.raw.repl.co/

Answer 1

当类型属性为文本或按钮时，您可以为元素设置宽度，然后 css 转换属性可以处理动画。

将此添加到您的风格中：

#button[type=button]{
  width: 150px;
}

#button[type=text]{
  width: 280px;
}

其他都没问题

Answer 2

定义你的 text 类型 css，所以一旦它变成 text 类型，点击后它就会出现动画。

$(document).ready(function(){
  $("#button").click(function(){
    //$("#button").animate({width: '80%'});
    $(this).attr("type","text")
    $(this).attr("value", "")
    $(this).attr("placeholder","Lets do this!")
  });
});

body, html {
   background-color: #212129 !important;
   height: 100%;
   width: 100%;
}

#submitArea{
  position: absolute;
  margin: auto;
  width: 60%;
  height: 50%;
  top: 50%;
  left: 50%;
  border-radius: 0.5rem;
  transform: translate(-50%, -50%);
  background-color: #0084ff;
}

#button{
  position: absolute;
  font-size: 32pt;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  padding: 1.5% 2%;
  border: none;
  border-radius: 0.35rem;
  /*transition: all;
  transition-duration: 150ms;*/
}

input[type=text] {
  width: 200px;
  transition: width 1s ease-in-out !important;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>WolframDelta</title>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script src="https://kit.fontawesome.com/a076d05399.js"></script><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
    <div id="submitArea">
      <input id="button" type="button" value="Ready?">
    </div>
  </body>
</html>

HTML 从按钮到文本输入的转换

HTML transition from button to text input

html

javascript

css

jquery

css-transitions