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

Question

I use JavaScript to switch notifications as shown below. How to add a transition between display: block and display: none;

I do not want to add an external library such as jQuery, because I only use the toggle effect.

 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 that I can use jQuery to achieve this, as shown 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 move up and down gradually while #hint switches, as in the jQuery example above? I do not want the button to jump from one position to another.

Answer 1

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> 

Answer 2

@Vothaison suggestion: CSS transitions

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

 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 such things with vanilla JavaScript, so here's a quick sketch of one of the ways:

 // 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 trivialize this process of demonstrating and hiding things. Why not just take a show and hide functions from jQuery source code?

Answer 3

Without using the css3 transition, you can use js setInterval to change some css property for the div, for example:

• Change Opacity From 0 To 1

• Change height from 0 to full height

• Change width from 0 to full width

Initially, you should have display: none; opacity: 0; height: 0; width: 0' display: none; opacity: 0; height: 0; width: 0'

Then you should change display: none to display: block; before using setInterval to change other properties.

(I think you know how to hide the div)

You can also use setTimeout () with a recursive trick.

Answer 4

 var btn = document.querySelector('button'); btn.addEventListener('click', function(){ var hint = document.getElementById('hint'); if(hint.style.visibility == 'hidden'){ hint.style.visibility = 'visible'; hint.style.opacity = '1'; } else{ hint.style.visibility = 'hidden'; hint.style.opacity = '0'; } }); 

 div#hint{ background: gold; color: orangered; padding: .5em; font-weight: bold; transition: visibility 1s, opacity 0.5s linear; } 

 <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 think using visibility before rendering is the best option

Answer 5

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; } 

 <div id='hint' class="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> 

Answer 6

Hey. I do not use display: block to display: none , but instead changing the opacity, height and padding, check out this option:

 var btn = document.querySelector('button'); btn.addEventListener('click', function() { var hint = document.getElementById('hint'); if (hint.classList.contains('h-hide')) { hint.classList.remove('h-hide'); } else { hint.classList.add('h-hide'); } }); 

 div#hint { display: block; background: gold; color: orangered; padding: .5em; font-weight: bold; transition: .5s all linear; opacity: 1; overflow: hidden; height: 100px; } #hint.h-hide { padding: 0; opacity: .25; height: 0; } 

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

The disadvantage of this approach is that we need to keep the div # tooltip height trace and change it with javascript if necessary.

Answer 7

I also tried to do this. Please see if he can help you.

 var btn = document.querySelector('button'); var hint = document.getElementById('hint'); hint.style.opacity = 1; hint.style.transition = "opacity 1s"; btn.addEventListener('click', function(){ if(hint.style.opacity == 0 || hint.style.opacity==''){ hint.style.opacity = 1; } else{ hint.style.opacity = 0; } });