HTML переход от кнопки к вводу текста - PullRequest
Новая
       78

HTML переход от кнопки к вводу текста

1 голос
/ 09 октября 2019

Мне нужна помощь с программой, над которой я работаю, для школьного проекта. Будет ли какой-либо способ перехода при изменении атрибута 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/

Ответы [ 2 ]

0 голосов
/ 09 октября 2019

определяет ваш 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>
0 голосов
/ 09 октября 2019

Что вы можете сделать, это установить ширину элемента, когда атрибуты типа являются текстом или кнопкой, тогда свойство css transition может обрабатывать анимацию.

Добавьте это в свой стиль: 

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

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

Все остальное в порядке

...