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

Question

我正在为一个学校元素工作的程序需要帮助，当 type="" 时，我有什么方法可以过渡吗？属性从 text 更改至 button ？我试过 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;
}

一切正常