How to add transition to height when certain class is removed

Question

I'm trying to add transition when class "constraint" is removed

I don't understand I've added the transtion for max-height & it's not working

const container = document.getElementById('container');
const button = document.getElementById('button');

button.addEventListener('click', ()=> {
    container.classList.remove("constraint");
})

.container{
  max-height: auto;
  background: red;
  overflow: hidden;
  -webkit-transition: max-height 1s ease-out;
  -moz-transition: max-height 1s ease-out;
  -o-transition: max-height 1s ease-out;
  transition: max-height 1s ease-out;
}
.constraint{
  max-height: 100px;
}
h1 {
  font-size: 50px;
}

<div id="container" class="container constraint">
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1><h1>
    Hello
  </h1>
</div>

<button id="button">
expand
</button>

when expand is click the "constraint" is remove but there's no transition

You need to first specify a `height` in order to transition `max-height`. Maybe [this post](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) helps you? — Daan, Jun 29 '21 at 14:53

score 0 · Answer 1 · answered Jun 29 '21 at 14:56

Instead of removing a class, you can just add a style.

So you just have to change this:

const container = document.getElementById('container');
const button = document.getElementById('button');

button.addEventListener('click', ()=> {
    container.classList.remove("constraint");
})

to this:

const container = document.getElementById('container');
const button = document.getElementById('button');
const constraint = document.querySelector(".constraint"); // Added this

button.addEventListener('click', ()=> {
    constraint.style.maxHeight = "1000px"; // Changed this
})

Your full code would be this:

const container = document.getElementById('container');
const button = document.getElementById('button');
const constraint = document.querySelector(".constraint"); // Added this

button.addEventListener('click', ()=> {
    constraint.style.maxHeight = "1000px"; // Changed this
})

.container{
  max-height: auto;
  background: red;
  overflow: hidden;
  -webkit-transition: max-height 1s ease-out;
  -moz-transition: max-height 1s ease-out;
  -o-transition: max-height 1s ease-out;
  transition: max-height 1s ease-out;
}
.constraint{
  max-height: 100px;
}
h1 {
  font-size: 50px;
}

<div id="container" class="container constraint">
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1><h1>
    Hello
  </h1>
</div>

<button id="button">
expand
</button>

score 0 · Accepted Answer · answered Jun 29 '21 at 14:56

transition wants a fixed starting value for max-height, not auto. It's ok to set it at a high number

 max-height: 1000px;

const container = document.getElementById('container');
const button = document.getElementById('button');

button.addEventListener('click', ()=> {
    container.classList.remove("constraint");
})

.container {
  max-height: 1000px;
  background: red;
  overflow: hidden;
  -webkit-transition: max-height 1s ease-out;
  -moz-transition: max-height 1s ease-out;
  -o-transition: max-height 1s ease-out;
  transition: max-height 1s;
}

.container.constraint {
  max-height: 100px;
}

h1 {
  font-size: 50px;
}

<div id="container" class="container constraint">
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1>
</div>

<button id="button">
expand
</button>

How to add transition to height when certain class is removed

2 Answers2