Question 333707 in CSS Question posted in
Some basic documentation can be found here.

preventing CSS transition to font-size 0 from Jumping

I want to have a division disappear by shrinking smoothly.
I tried doing this by making the font-size change to 0 with transition set to 1s.

When I do this the font gets some some minimum size, then freezes and then disappears causing a jerky jumpy change to the layout.

I would like it to shrink smoothly like it does when transform:scale(0) is set, but the layout doesn’t change when I do this.

Here is a jsFilddle example:
https://jsfiddle.net/3e0ajpzL/1/

css

.shown {
  font-size: 2em;
  transition: 1s;
  cursor: pointer;
}

.hidden {
  font-size: 0;
}

HTML

Top
<div onclick=hide(this) id=target class=shown>
  Click to make me go away<br>
  -----------------<br>
  more lines<br>
  make <br>
  it <br>
  Worse
</div>
<div style=cursor:pointer onclick=restore()>
  Click to bring him back
</div>

JS

function hide(ele) {
  ele.classList.toggle("hidden");
}

function restore() {
  document.getElementById("target").classList.toggle("hidden");
}

EDIT
This appears to not happen on the edge browser. I am using chrome browser.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As A Haworth pointed out, in some browsers you can set a minimum font size. I appear to have done this on my chrome browser. On the current chrome browser you can get to this setting by going to setting>appearance>custom fonts or by going to chrome://settings/fonts

    Set the minimum font size to the lowest setting to the lowest setting.


  2. 0

    I think you need to add line-height

    .shown {
    font-size: 2em;
    line-height: 1em;
    transition: 1s all;
    cursor: pointer;
}
.hidden {
   font-size: 0;
   line-height: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search