Как полностью скрыть элемент после перехода - PullRequest
Новая
       14

Как полностью скрыть элемент после перехода

0 голосов
/ 05 июля 2018

У меня есть этикетка и небольшое поле ввода, встроенные друг в друга. Ниже этой строки у меня есть статический текст.

Когда поле ввода наведено, поле ввода будет увеличиваться влево и «скрывать» встроенный текст рядом с ним.

Что я заметил, так это то, что после того, как поле ввода завершает переход к полной ширине, ниже создается пустая строка (невидимый встроенный текст перемещается в следующую строку).

Я пробовал использовать атрибут display: none, но, к сожалению, переходы и отображение не очень хорошо сочетаются.

HTML: 

<div class="container">
  <input />
  <label>Hide Me</label>
</div>
<div>
  <label>Static Text</label>
</div>

CSS (МЕНЬШЕ): 

.container {
  display: inline-block;
  width: 200px;

  label {
    transition: all ease 1s;
    transition-delay: 1s;
  }

  input {
    float: right;
    transition: width 2s ease;
    width: 0;

    &:hover {
      width: 200px;
    }
  }

  input:hover + label {
    visible: hidden;
    opacity: 0;
    transition: all ease 0s;
    transition-delay: 0;
  }
}

Вот демонстрация: Codepen

Есть ли способ полностью скрыть встроенный текст (как если бы встроенный текст отображался: ни один не применен) без Javascript?

У меня есть идея, как решить эту проблему с помощью JavaScript, проверяя, когда переход завершен. Но мне любопытно узнать, есть ли решение только для CSS.

Ответы [ 3 ]

0 голосов
/ 05 июля 2018

это то, что вам нужно? 

fieldset{
  display:inline-block;
  position:relative;
  width:200px;
  height:auto;
  border:none;
  background:#26a69a;
}
label{
  display:inline-block;
  vertical-align:middle;
  color:white;
  position:relative;
  z-index:1;
  transition:opacity 385ms cubic-bezier(0.23, 1, 0.32, 1);
}
input{
  position:absolute;
  z-index:2;
  width:5px;
  right:5px;
  top:8px;
  transition:all 385ms cubic-bezier(0.23, 1, 0.32, 1);
}

fieldset:hover label{
  opacity:0;
}

fieldset:hover input{
  width:195px;
  right:10px;
}
<fieldset>
  <label>Hover on me</label>
  <input type="text"/>
</fieldset>

надеюсь, это поможет

0 голосов
/ 05 июля 2018

Вы можете сделать это width:0 и использовать white-space:nowrap.

Я использовал max-width, чтобы можно было рассчитывать на переход 

.container {
  display: inline-block;
  width: 200px;
  font-size:0;
}
.container label {
  font-size:initial;
  transition: all ease 1s;
  transition-delay: 1s;
  display:inline-block;
  white-space:nowrap;
  max-width:200px;
}
.container input {
  float: right;
  font-size:initial;
  transition: max-width 2s ease;
  max-width: 0;
  width:100%;
}
.container input:hover {
  max-width: 100%;
}
.container input:hover + label {
  max-width:0;
  opacity: 0;
  transition: all ease 1s;
}
<div class="container">
  <input><label>Hide Me</label>
</div>
<div>
  <label>Static Text</label>
</div>
0 голосов
/ 05 июля 2018

Вы можете добавить фиксированную высоту и использовать overflow: hidden. Это не обязательно лучший способ, но он работает: https://codepen.io/anon/pen/GGaazq?editors=1100

...