CSS height animation on element with dynamic height

Question

I have a div with dynamic height, and I want to use animation when the height grows. The problem is that I can't set the div's height (it has to be dynamic), so there's nothing to animate on.

.text {
  transition: all .3s ease-in-out;
  min-height: 20px;
  max-height: 200px;
  overflow: auto;
}

.max {
  transition: all .3s ease-in-out;
  height: 200px;
  min-height: 200px;
}

https://jsfiddle.net/abk7yu34/5/

Note that the shrinking animation works because the div has min-height.

Is there a way to solve this in pure CSS?

change height:200px to max-height:200px; – Chiller May 21 '17 at 15:06 — Chiller, May 21 '17 at 15:06

Dalin Huang · Accepted Answer · 2022-11-09T18:44:12.567

Remove the height: 200px;, so you have both animate for expand and collapse.

Also, use the following to add animate on new line:

@keyframes lineInserted {
  from {
    height: 0;
  }
  to {
    height: 20px; /* your line height here */
  }
}
div[contenteditable] > div {
  animation-duration: 0.3s;
  animation-name: lineInserted;
  transition: height 0.3s;
}

document.querySelector('#button').addEventListener('click', function() {
  document.querySelector('.text').classList.toggle('max');
});

.text {
  background: green;
  color: #fff;
  transition: all .3s ease-in-out;
  min-height: 20px;
  max-height: 90vh;
  overflow: auto;
}

.max {
  transition: all .3s ease-in-out;
  min-height:90vh;
}

@keyframes lineInserted {
  from {
    height: 0;
  }
  to {
    height: 20px; /* your line height here */
  }
}
div[contenteditable] > div {
  animation-duration: 0.3s;
  animation-name: lineInserted;
  transition: height 0.3s;
}

<div class="text" contentEditable="true"></div>
<button id="button">Click</button>

I don't see how this is dynamic. It's still a fixed height of 200 in .max — geoidesic, Apr 18 '21 at 11:26
@geoidesic this is a very old post, but I think OP wants a toggleable height, when you click it will expand, click again it collapses. — Dalin Huang, Mar 02 '22 at 16:35

score 2 · Answer 2 · answered May 21 '17 at 15:08

2

Try removing the max-height attribute on the text class and transitioning to a new (dynamic) min height

.text {
    background: green;
    color: #fff;
    transition: min-height .3s ease-in-out;
    min-height: 20px;
    overflow: auto;
}

.max {
    transition: min-height .3s ease-in-out;
    min-height: 200px;
}

https://jsfiddle.net/Alessi42/abk7yu34/8/

Does this give the desired effect?

answered May 21 '17 at 15:08

Alessi 42

1,112
11
26

12

No, now you have a fixed height at 200px again. – Juuro Dec 15 '20 at 10:00

CSS height animation on element with dynamic height

2 Answers2