CSS transition effect not working

Question

I have created a "read more / read less" collapsable button with javascript, for the bio description of authors, on a wordpress site I am working on.

The collapsable is working fine, except that the transition css effect not working. I have tested this, and I think it is because when I uncollapse the text, i set the height to "auto", because obviously I don't know how long the text is going to be.

If I set the height to a number, the transition works. But I need to set to auto.

here is the fiddle: https://jsfiddle.net/brsastre/jo29pfm8/

p {
  height: 30px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
p.uncollapsed {
  height: auto;
}

score 1 · Answer 1 · edited Jan 20 '18 at 15:49

You can't transition to height: auto, one of the coolest tricks is to animate max-height in order to get the same effect of height: auto.

Something like that:

var button = document.getElementById("button");
button.onclick = function() {
  var text = document.getElementById("text");
  text.classList.add("uncollapsed");
};

p {
  max-height: 30px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

p.uncollapsed {
  max-height: 100px;
}

<p id="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem obcaecati tenetur voluptates asperiores vero necessitatibus incidunt magni beatae debitis. Libero error, ab. Debitis odit, nulla blanditiis obcaecati assumenda eveniet. Nesciunt. Lorem
  ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero provident beatae qui minima iusto, corrupti quidem nam iste alias dicta? Cupiditate quidem neque dolores distinctio quam commodi inventore provident.
</p>
<button id="button">button</button>

Thank you Bhuwan - I have decided to go with this solution. I has a disadvantage though. The transition looks quirky. Like, it opens fast, and it take a fraction of a second to close... I think this is because it calculates the transition with a height that is not real. — brsastre, Jan 20 '18 at 21:14

score 1 · Answer 2 · answered Jan 20 '18 at 15:43

1

You can't animate to or from a dimension of "auto" (unfortunately). you should use the height to animate. here is the solution :

p {
  height: 30px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
p.uncollapsed {
  height: 80px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

answered Jan 20 '18 at 15:43

Mark

11
3

Thanks Mark, but this solution unfortunatelly doesnt work, because I can get the height with javascript when I load the page, but the height is different on mobile devices.. as you shrink the browser, the height would grow. – brsastre Jan 20 '18 at 21:11

score 0 · Answer 3 · answered Jan 20 '18 at 15:39

0

This won't work because of height: auto. Try this:

p {
   height: 30px;
   overflow: hidden;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

p.uncollapsed {
  height: 100px;
}

answered Jan 20 '18 at 15:39

Nir Ben-Yair

1,566
3
14
18

Thanks Mark, but this solution unfortunatelly doesnt work, because I can get the height with javascript when I load the page, but the height is different on mobile devices.. as you shrink the browser, the height would grow. – brsastre Jan 20 '18 at 21:19

CSS transition effect not working

3 Answers3