Можно ли установить высоту входного элемента равной 0?

ProgramBox

Можно ли установить высоту входного элемента равной 0?

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#html #css #css-animations #css-transitions

Вопрос:

Я использую CSS-переходы для изменения высоты входного элемента с 40 пикселей на 0 пикселей в надежде заставить его исчезнуть.

Этот эффект работает для изображений и выглядит прилично, но, похоже, не работает для входных элементов.

Однако для ввода он не достигает 0 пикселей и исчезает.

Я хотел бы использовать CSS-переходы, чтобы входные данные медленно исчезали. Возможно ли это?

Вот пример того, как выглядит вход с высотой: 0 пикселей.

https://jsfiddle.net/01geLwh7/

 .search_bar_input {
  box-sizing: border-box;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;
  width: 140px;
  background-color: rgba(255, 255, 255, 0);
  margin: 0 auto;
  position: relative;
  top: 6px;
}

#search_bar_input_show {
  height: 40px;
}

#search_bar_input_hide {
  height: 0px;
}

 <input class="search_bar_input" id="search_bar_input_hide" name="search" type="text" placeholder=" Search" />

Ответ №1:

Вам также придется уменьшить отступ и границу ввода:

 .search_bar_input {
  box-sizing: border-box;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;
  width: 140px;
  background-color: rgba(255, 255, 255, 0);
  margin: 0 auto;
  position: relative;
  top: 6px;
}

#search_bar_input_show {
  height: 40px;
}

#search_bar_input_hide {
  height: 0px;
  padding: 0px;
  border: 0px;
}

 <input class="search_bar_input" id="search_bar_input_hide" name="search" type="text" placeholder=" Search" />

1. спасибо, это очень помогает, однако я не могу перенести свою границу, потому что она слишком мала, она идет от 1 пикселей до 0 пикселей. Как ни странно, изменение размеров коробки не помогло.

2. @howard вы можете перейти border-color к тому, чтобы стать прозрачным.

Ответ №2:

Я предпочитаю transform: scale() в этих случаях, в основном потому, что это действительно работает. Во-вторых, scale умножает размер, чтобы вам не нужно было менять height его несколько раз, если это необходимо.

~~Кроме того, у вас [была] опечатка в вашем HTML: className должно быть class .~~ (Если вы используете React, то все в порядке; спасибо, такоши).

 var input = document.querySelector(".search_bar_input");
setInterval(() => {
  if (input.id === "search_bar_input_show") {
    input.id = "search_bar_input_hide";
  } else {
    input.id = "search_bar_input_show";
  }
}, 1000);

 .search_bar_input{
  box-sizing: border-box;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;
  width: 140px;
  background-color: rgba(255, 255, 255, 0);
  margin: 0 auto;
  position: relative;
  top: 6px;
  height: 40px;
  transition: transform 0.5s;
}
#search_bar_input_show{
  transform: scale(1, 1);
}
#search_bar_input_hide{
  transform: scale(1, 0);
}

 <input
  class="search_bar_input"
  id="search_bar_input_show"
  name="search"
  type="text"
  placeholder=" Search"
/>

Кроме того, используя transform , вы также можете измениться transform-origin .

1. className это не обязательно неправильно. React в качестве примера использует его. Это было просто исправлено мной, чтобы сделать код воспроизводимым.

2. Я не уверен в актуальности масштаба(). Я обнаружил, что у меня были дополнительные размеры, добавленные с помощью отступа по умолчанию и границы, которую я установил на 1 пиксель. Как ни странно, изменение свойства размера коробки не помогло. В чем заключается актуальность масштаба(). Я не понял вашего объяснения.

3. @howard Scale буквально масштабирует все свойства размеров, как вы учили на алгебре. Он масштабирует элемент, умножая его на любой коэффициент. Вы можете прочитать больше на MDN

4. @tacoshy Я вырезал эту часть в своем редактировании; должен ли я просто удалить эту часть вообще?

5. Лично я бы удалил. Однако, поскольку ОП конкретно не упоминал о реакции или не отмечал ее как таковую, это может быть законная информация. Кроме того, я не являюсь модератором, и в руководящих принципах конкретно не рассматривается такая ситуация.

Метки: Можно ли установить высоту входного элемента равной 0?