Css animation not working with opening div in javascript

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65649969/css-animation-not-working-with-opening-div-in-javascript

Answer 1

All your javascript code with a counter can be replaced with the toggle() method:

divText.classList.toggle('open');

Very important. With the display: none rule you won't be able to make an transition effect. But this can be fixed by using only the height and overflow rules.

let clickBtn = document.querySelector('.myBtn');
let divText = document.querySelector('.myDiv');
    
clickBtn.addEventListener('click', function(event){
  divText.classList.toggle('open');
})

.myDiv{
  background: red;
  width: 60px;
  height: 0;
  transition: height 2s;
  overflow: hidden;
}

.myDiv.open{
  height: 200px;
}

<div><button class="myBtn">Click me</button></div>

<div class="myDiv">
    this is the text.
</div>