Multiline container unfolding animation

Question

How should CSS multiline container (e.g. content block or alert) unfolding animation should be managed?

http://plnkr.co/edit/Qq5fzeb3GBengviVNimC?p=preview

.alert {
  background: turquoise;
  color: white;
  padding: 10px;
  overflow: hidden;

    opacity: 0;
    max-height: 0;
}

body:hover .alert {
    display: block !important;
    opacity: 1;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -ms-transition: 2s;
  transition: 2s;
  max-height: 100px;
}

The problem here is 'multiline', as you can see, the block height isn't a fixed value.

<div class="alert">Alert!<br>Alert!<br>Alert!</div>

While max-height: 100px is near real block height, it works fine. If max-height is smaller, the animation would be jaggy in the end, and max-height: 9999px will make the transition too fast.

Can this be done without calculating the exact height in JS?

As far as I know, CSS height can't be smoothly transitioned without fixed sizes. See http://stackoverflow.com/questions/6089548/css3-height-transition-not-working for discussion. You don't have to specify the height ahead of time in CSS if you use JS, as that link shows, or as TijnvW demonstrated in their answer. — Palpatim, Jun 09 '15 at 16:37

score -1 · Answer 1 · answered Jun 09 '15 at 16:18

-1

Calculating the height can be done in jQuery indeed, I did the following to solve your problem:

$("#out").html("Block height: " + $("#alert").height());
//solely for demonstration, you can delete this line

$("#alert").css('height','0px');

$('#alert').mouseover( function(){
    $("#alert").css('height', '58px');
});
$('#alert').mouseout( function(){
    $("#alert").css('height', '0px');
});

#alert {
  background: turquoise;
  color: white;
  padding: 10px;
  overflow: hidden;
  opacity: 0;
  //max-height: 0; this causes .height() to always display '0' so delete this here, and set this via jQuery

}

body:hover #alert {
 display: block !important;
 opacity: 1;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -ms-transition: 2s;
  transition: 2s;
 // max-height: 100px !important; set this via jQuery
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Hello!</p>
<div id="alert">Alert!<br>Alert!<br>Alert!</div>
<p>Hello again!</p>

<span id="out"></span>

answered Jun 09 '15 at 16:18

SJDS

312
7
19

The OP specified in their question, "Can this be done without calculating the exact height in JS?" – Palpatim Jun 09 '15 at 16:21
@Palpatim Yes, it was the second question. I will accept JS answer if it is impossible to do with CSS only. But such solution suffers from hard-coded height, the height could be also changed on zoom, resize or change in block content. – Estus Flask Jun 09 '15 at 16:35
Ooops, completely overlooked the word 'without', I'm sorry! Wouldn't know if this could be done in pure CSS, so I'm curious if anyone has an other solution – SJDS Jun 09 '15 at 16:41
Don't think anyone knows a CSS-only solution, though problems with change in block content could be overcome with .change() for form field elements – SJDS Jun 12 '15 at 06:57

Multiline container unfolding animation

1 Answers1