transition height when element text change

Question

I am trying to transition the change in height when text is change.

I'm currently transition the CSS max-height property as its more flexible than height.

My strategy was that:

1. the text will be wrapped in a <span>#text</span> and placed inside the main container.
2. then make span display: inline-block,
3. then set the main/wrapper element's max-height to the clientHeight of the span.

This almost works, the problem is that it only transition when the previous height is less than the new height, that is, it only transition from small to big, and not big to small.

code below.

var contents = [
    "a".repeat( 10 ),
    "Bb".repeat( 30 ),
    "Cc".repeat( 40 ),
    "D".repeat( 15 ),
    "Ee".repeat( 20 ),
    "Ff".repeat( 60 ),
    "g".repeat( 25 )
]

changeText.addEventListener('click', function() {

    text.textContent = randomText();
    wrapper.style.maxHeight = text.clientHeight + 'px';
    
});

function randomText() {
    return contents[ Math.floor(Math.random() * contents.length) ];
}

#wrapper {
  background-color: #ccc;
  padding: 5px 10px;
  word-break: break-all;
  width: 200px;
  overflow: hidden;
  
  /* set to the minimum height the #wrapper can be */
  max-height: 18px;
  
  transition: max-height 0.3s;
}

#wrapper > span {
  display: inline-block;
}

<button id="changeText">change text</button>

<div id="wrapper">
  <span id="text">no change</span>
</div>

Answer 1

Edit: I think the reason max-height does not work by itself is that the span element's height is changing the height of the wrapper to something less than the previous max-height, so the browser sets the height without utilizing the max height. Since max-height isn't used to set the height, there's no transition.

--

What about animating both height and max-height?

fiddle example

var contents = [
    "a".repeat( 10 ),
    "Bb".repeat( 30 ),
    "Cc".repeat( 40 ),
    "D".repeat( 15 ),
    "Ee".repeat( 20 ),
    "Ff".repeat( 60 ),
    "g".repeat( 25 )
]
changeText.addEventListener('click', function() {
    text.textContent = randomText();
    wrapper.style.height = text.clientHeight + 'px'  
    wrapper.style.maxHeight = text.clientHeight + 'px'  
});

function randomText() {
    return contents[ Math.floor(Math.random() * contents.length) ];
}

And update the css to transition the height:

#wrapper {
    background-color: #ccc;
    padding: 5px 10px;
    word-break: break-all;
    width: 200px;
    overflow: hidden;
    /* set to the minimum height the #wrapper can be */
    max-height: 18px;
    transition: all 0.3s;
}

#wrapper > span {
    display: inline-block;
}

Answer 2

Working demo: https://jsfiddle.net/2p5zjtud/1/

CSS edited:

#wrapper {
  background-color: #ccc;
  padding: 5px 10px;
  word-break: break-all;
  width: 200px;
  overflow: hidden;

  /* set to the minimum height the #wrapper can be */
  transition: height 1s;

}

#wrapper > span {
  min-height: 1em;
  display: inline-block;
}

JS edited:

var contents = [
    "a".repeat( 10 ),
    "Bb".repeat( 30 ),
    "Cc".repeat( 40 ),
    "D".repeat( 15 ),
    "Ee".repeat( 20 ),
    "Ff".repeat( 60 ),
    "g".repeat( 25 )
]

changeText.addEventListener('click', function() {

    text.textContent = randomText();
    wrapper.style.height = text.clientHeight + 'px';

});

function randomText() {
    return contents[ Math.floor(Math.random() * contents.length) ];
}