JavaScript - add transition between display:none and display:block

Question

I am using JavaScript to toggle notification like below. How can I add transition between display: block and display: none;

I don\'

Answer 1

Try something like this:

var btn = document.querySelector('button');

btn.addEventListener('click', function(){
  var hint = document.getElementById('hint');

  hint.classList.toggle("hide");
});

.hint{
  background: gold;
  color: orangered;
  padding: .5em;
  font-weight: bold;
  
  visibility: visible;
  opacity: 1;
  max-height: 500px;
  transition: visibility 0s, opacity 0.3s, max-height 0.6s linear;
}

.hide {
  visibility: hidden;
  opacity: 0;
  max-height: 0px;
  transition: max-height 0.3s, opacity 0.3s, visibility 0.3s linear;
}

  
  
This is some hint on how to be safe in this community 
   
This is another hint on how to be safe in this community 
  

 show hint