javascripttransitiondisplay

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


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

I don't want to add an external library like jQuery because I am only going to be using the toggle effect alone.

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

btn.addEventListener('click', function(){
  var hint = document.getElementById('hint');
  if(hint.style.display == 'none'){
    hint.style.display = 'block';
  }
  else{
    hint.style.display = 'none';
  }

});
div#hint{
  background: gold;
  color: orangered;
  padding: .5em;
  font-weight: bold;
}
<div id='hint'>
  
  <p>This is some hint on how to be safe in this community </p>
   <p>This is another hint on how to be safe in this community </p>
  </div>

<button> show hint </button>

I know I can use jQuery to achieve this like below.

$(document).ready(function(){

$('button').click(function(){
$('#hint').toggle('slow');

});

});
div#hint{
      background: gold;
      color: orangered;
      padding: .5em;
      font-weight: bold;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='hint'>
      
      <p>This is some hint on how to be safe in this community </p>
       <p>This is another hint on how to be safe in this community </p>
      </div>

    <button> show hint </button>

Can I make the button moves up and down gradually while the #hint is being toggle like in the jQuery example above? I don't want the button to jump from one position to another.


Solution

  • see my example below:

    var btn = document.querySelector('button');
    var hint = document.getElementById('hint');
    var height = hint.clientHeight;
    var width = hint.clientWidth;
    console.log(width + 'x' + height);
    // initialize them (within hint.style)
    hint.style.height = height + 'px';
    hint.style.width = width + 'px';
    
    btn.addEventListener('click', function(){
      if(hint.style.visibility == 'hidden'){
        hint.style.visibility = 'visible';
        //hint.style.opacity = '1';
        hint.style.height = height + 'px';
        hint.style.width = width + 'px';
        hint.style.padding = '.5em';
      }
      else{
        hint.style.visibility = 'hidden';
        //hint.style.opacity = '0';
        hint.style.height = '0';
        hint.style.width = '0';
        hint.style.padding = '0';
      }
    
    });
    div#hint{
      background: gold;
      color: orangered;
      padding: .5em;
      box-sizing: border-box;
      overflow: hidden;
    
      font-weight: bold;
      transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out;
    }
    <div id='hint'>
      
      <p>This is some hint on how to be safe in this community </p>
      <p>This is another hint on how to be safe in this community </p>
    </div>
    
    <button> show hint </button>