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'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.

Answer 1

@vothaison's suggestion: CSS transitions

Technically, @vothaison wanted to use setInterval as opposed to setTimeout, but I don't see the need for that. It's just more work.

var hint = document.getElementById('hint');  var btn = document.getElementById('btn_show');    btn.addEventListener('click', function(){    var ctr = 1;    hint.className = hint.className !== 'show' ? 'show' : 'hide';    if (hint.className === 'show') {      hint.style.display = 'block';      window.setTimeout(function(){        hint.style.opacity = 1;        hint.style.transform = 'scale(1)';      },0);    }    if (hint.className === 'hide') {      hint.style.opacity = 0;      hint.style.transform = 'scale(0)';      window.setTimeout(function(){        hint.style.display = 'none';      },700); // timed to match animation-duration    }     });

#hint {    background: yellow;    color: red;    padding: 16px;    margin-bottom: 10px;    opacity: 0;    transform: scale(0);    transition: .6s ease opacity,.6s ease transform;  }

<div id="hint" style="display: none;">    <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 id="btn_show"> Show hint </button>

Using CSS animations

var hint = document.getElementById('hint');  var btn = document.getElementById('btn_show');    btn.addEventListener('click', function(){    hint.className = hint.className !== 'show' ? 'show' : 'hide';    if (hint.className === 'show') {      setTimeout(function(){        hint.style.display = 'block';      },0); // timed to occur immediately    }    if (hint.className === 'hide') {      setTimeout(function(){        hint.style.display = 'none';      },700); // timed to match animation-duration    }  });

@-webkit-keyframes in {    0% { -webkit-transform: scale(0) rotate(12deg); opacity: 0; visibility: hidden;  }    100% { -webkit-transform: scale(1) rotate(0); opacity: 1; visibility: visible; }  }    @keyframes in {    0% { transform: scale(0) rotate(12deg); opacity: 0; visibility: hidden;  }    100% { transform: scale(1) rotate(0); opacity: 1; visibility: visible; }  }    @-webkit-keyframes out {    0% { -webkit-transform: scale(1) rotate(0); opacity: 1; visibility: visible; }    100% { -webkit-transform: scale(0) rotate(-12deg); opacity: 0; visibility: hidden; }  }    @keyframes out {    0% { transform: scale(1) rotate(0); opacity: 1; visibility: visible; }    100% { transform: scale(0) rotate(-12deg); opacity: 0; visibility: hidden;  }  }    #hint {    background: yellow;    color: red;    padding: 16px;    margin-bottom: 10px;  }    #hint.show {    -webkit-animation: in 700ms ease both;    animation: in 700ms ease both;  }    #hint.hide {    -webkit-animation: out 700ms ease both;    animation: out 700ms ease both;  }

<div id="hint" style="display: none;">    <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 id="btn_show"> Show hint </button>

---

Using vanilla JavaScript

There are many, many ways to do this sort of thing with vanilla JavaScript, so here's a quick sketch of one way:

// you may need to polyfill requestAnimationFrame    var hint = document.getElementById('hint');  var btn = document.getElementById('btn_show');    btn.addEventListener('click', function(){    var ctr = 0;    hint.className = hint.className !== 'show' ? 'show' : 'hide';        if (hint.className === 'show') {      window.setTimeout(function(){        hint.style.display = 'block';        fadein();      },0); // do this asap            }        if (hint.className === 'hide') {      fadeout();      window.setTimeout(function(){        hint.style.display = 'none';      },700); // time this to fit the animation    }        function fadein(){      hint.style.opacity = ctr !== 10 ? '0.'+ctr : 1;      hint.style.transform = ctr !== 10 ? 'scale('+('0.'+ctr)+')' : 'scale(1)';      ctr++;            if (ctr < 11)        requestAnimationFrame(fadein);            else        ctr = 0;    }      function fadeout(){      hint.style.opacity = 1 - ('0.'+ctr);      hint.style.transform = 'scale('+(1 - ('0.'+ctr))+')';      ctr++;            if (ctr < 10)        requestAnimationFrame(fadeout);      else        ctr = 0;    }  });

#hint {    background: yellow;    color: red;    padding: 16px;    margin-bottom: 10px;    opacity: 0;  }

<div id="hint" style="display: none;">    <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 id="btn_show"> Show hint </button>

Say what you want about GreenSock, Velocity.js, jQuery, etc — they all trivialise this process of showing and hiding of things. Why not just borrow the show and hide functions from jQuery's source code?