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;
}

其他都很好

Answer 2

您的animate()运行良好，只需删除CSS动画。

$(document).ready(function() {
  $("#button").click(function() {
    $("#button").animate({
      width: '80%'
    });
    $("#button").attr("type", "text")
    $("#button").attr("value", "")
    $("#button").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;
}

.rainbow-bg {
  animation: rainbow-bg 20s linear;
  animation-iteration-count: infinite;
}

.rainbow {
  animation: rainbow 2.5s linear;
  animation-iteration-count: infinite;
}

@keyframes rainbow-bg {
  100%,
  0% {
    background-color: rgb(255, 0, 0);
  }
  8% {
    background-color: rgb(255, 127, 0);
  }
  16% {
    background-color: rgb(255, 255, 0);
  }
  25% {
    background-color: rgb(127, 255, 0);
  }
  33% {
    background-color: rgb(0, 255, 0);
  }
  41% {
    background-color: rgb(0, 255, 127);
  }
  50% {
    background-color: rgb(0, 255, 255);
  }
  58% {
    background-color: rgb(0, 127, 255);
  }
  66% {
    background-color: rgb(0, 0, 255);
  }
  75% {
    background-color: rgb(127, 0, 255);
  }
  83% {
    background-color: rgb(255, 0, 255);
  }
  91% {
    background-color: rgb(255, 0, 127);
  }
}

@keyframes rainbow {
  100%,
  0% {
    color: rgb(255, 0, 0);
  }
  8% {
    color: rgb(255, 127, 0);
  }
  16% {
    color: rgb(255, 255, 0);
  }
  25% {
    color: rgb(127, 255, 0);
  }
  33% {
    color: rgb(0, 255, 0);
  }
  41% {
    color: rgb(0, 255, 127);
  }
  50% {
    color: rgb(0, 255, 255);
  }
  58% {
    color: rgb(0, 127, 255);
  }
  66% {
    color: rgb(0, 0, 255);
  }
  75% {
    color: rgb(127, 0, 255);
  }
  83% {
    color: rgb(255, 0, 255);
  }
  91% {
    color: rgb(255, 0, 127);
  }
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="submitArea" class="rainbow-bg">
  <input id="button" type="button" value="Ready?">
</div>

Answer 3

定义您的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/[email protected]/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>