How to CSS transition height of P tag when text is updated?

Question

I have a paragraph tag on a site in which I replace the contents of when a button is clicked (using Javascript) (ie: replace quote #1 with quote #2). I'm not simply expanding on the current text, sometimes the new text may be less than the current text, sometimes more.

In some cases, the text goes from a short about to a longer amount which causes a rather jerky movement on the site as the <p> tag increases it's height instantly.

I thought by adding a css transition of 2s might fix it, but it has no effect:

p.my-text {
  transition: 2s;
}

Is there is a way to transition the height of a <p> tag smoothly when the text is updated?

https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — Danield, Jul 17 '17 at 08:41
no matter how long is your text, you can't animate `height`, you can do that only with `max-height` the max-height will expand the container as height as the text is long. — Yordan Nikolov, Jul 17 '17 at 08:53

score 2 · Accepted Answer · answered Jul 17 '17 at 08:48

2

You cannot use a transition on a height: auto;, but instead you can use a transition between a given max-height(for instance 0) and another max-height bigger than the one expected. See https://codepen.io/LFeh/pen/ICkwe

answered Jul 17 '17 at 08:48

Thibault

424
5
5

score 2 · Answer 2 · answered Jul 17 '17 at 09:17

You can add a max-height value to create a transition on.

Take a look at this code sample.

var paragraph;
(() => {
 paragraph = document.getElementById('paragraph');
  paragraph.style.maxHeight = paragraph.scrollHeight +  "px";
 setInterval(() => {
  
   paragraph.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor nisl sit amet turpis euismod, sit amet vulputate sem mollis. Duis vitae scelerisque magna, et varius neque. Suspendisse at velit in urna tincidunt pellentesque feugiat non erat. Etiam malesuada sapien sapien, sed finibus orci rhoncus sed. Morbi ultrices scelerisque malesuada. Phasellus non dictum ipsum, sed malesuada lacus. Cras dignissim, lectus vel volutpat vulputate, felis ligula molestie velit, at tempor risus eros et orci. Ut malesuada, libero sit amet imperdiet volutpat, tellus orci tempus enim, in luctus diam mi a enim. Phasellus arcu urna, semper sit amet lobortis non, tempus eget felis. Donec ullamcorper nibh feugiat, porttitor mauris ac, imperdiet mi. Nam lectus felis, efficitur quis turpis non, dignissim feugiat purus.";
  
   paragraph.style.maxHeight = paragraph.scrollHeight +  "px";
  }, 1000);
 
})();

#paragraph {
  background-color: #eeeeee;
  transition: max-height 2s;
  overflow:hidden;
}

<p id="paragraph" >
lorem ipsum dolor
</p>

Note that you'll have to add overflow: hidden

This is really close, however, it doesn't work if the text is going from large to small. — David, Jul 17 '17 at 12:30
@David If you know the height you can use the `height` property instead of `max-height` and it will works even for large to small. But it won't work for `height:auto` — Béranger, Jul 17 '17 at 16:13

How to CSS transition height of P tag when text is updated?

2 Answers2