CODEWITHSUNDEEP
csscss-transitions
GloriousLemon
GloriousLemon

Reputation: 619

How to hide an element completely after a transition

I have a label and a small input box inline with one another. Below this row, I have some static text.

When the input box is hovered over, the input box will grow towards the left side and "hide" the inline text beside it.

What I notice is that after the input box finishes transition to it's full width, an empty line gets created below (the invisible inline text gets pushed to the next row).

I've tried using the display: none attribute, but unfortunately, transitions and display don't play nice together.

HTML:

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

CSS(LESS):

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

Here's a demo: Codepen

Is there a way to hide the inline text completely (basically as if the inline text had display:none applied) without Javascript?

I have an idea of how to solve this with javascript by checking when the transition is completed. But I'm curious to know if there's a CSS-only solution.

Upvotes: 0

Views: 2235

Answers (3)

Temani Afif
Temani Afif

Reputation: 272909

You can make it width:0 and use white-space:nowrap.

I used max-width to be able to rely on transition

.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>

Upvotes: 2

Teobis
Teobis

Reputation: 845

is this what you need?

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>

hope this helps

Upvotes: 2

Matthew Moore
Matthew Moore

Reputation: 866

You could add a fixed height, and use overflow: hidden. It's not necessarily the best way, but does function: https://codepen.io/anon/pen/GGaazq?editors=1100

Upvotes: -1

Related Questions