CODEWITHSUNDEEP
javascripttransitiondisplay
Abk
Abk

Reputation: 2233

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.

Upvotes: 38

Views: 87853

Answers (10)

Samarth Pawar
Samarth Pawar

Reputation: 11

const click = document.querySelector(".click");
const button = document.querySelector(".button");
click.style.transition="1s";
function qwe(){
    if (click.style.width != "600px") {
        click.style.width="600px";
        click.style.height="150px";
    }else{
        click.style.width="70px";
        click.style.height="20px";
    }
}
*{
    margin: 0%;
    padding: 0%;
}

.click{
    width: 70px;
    height: 20px;
    border: 1px solid black;
    margin: 10px;
    overflow: hidden;

}

.button{
    width: 70px;
    height: 20px;
    text-align: center;
    cursor: context-menu;

}

li{
    list-style: none;
    font-size: 25px;
    margin: 10px 0px 10px 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div class="click">
        <div class="button" onclick="qwe()">click me</div>
        <li>Hint number 1</li>
        <li>Hint number 2</li>
        <li>Hint number 3</li>
    </div>


<script src="js.js"></script>
</body>
</html>

Upvotes: 1

Douglas Vicentini
Douglas Vicentini

Reputation: 323

Vanilla Javascript based on jQuery's $.toggle, $.show and $.hide.

You just need to pass 3 arguments:

  1. HTML element;
  2. Type of animation | S = show | H = hide | T = toggle. Default = T;
  3. Delay in milliseconds.

Example: toggleVisibility(document.getElementById('p1'), 'T', 500);

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <style>
            table {
                width: 100%;
            }
        </style>
        <button onclick="toggleVisibility(document.getElementById('p1'), 'T', 500)">SHOW HIDE</button>
        <table id="p1">
            <thead>
                <th>TEST</th>
                <th>TEST</th>
                <th>TEST</th>
            </thead>
            <tbody>
                <tr>
                    <td>TEST</td>
                    <td>TEST</td>
                    <td>TEST</td>
                </tr>
                <tr>
                    <td>TEST</td>
                    <td>TEST</td>
                    <td>TEST</td>
                </tr>
                <tr>
                    <td>TEST</td>
                    <td>TEST</td>
                    <td>TEST</td>
                </tr>
            </tbody>
        </table>
        <script>
            /**
             * Toggle, show or hide the selected HTML element
             * @author Douglas Vicentini ([email protected])
             * @param {HTMLElement} element HTML element to toggle
             * @param {string} type Type of toggle | S = show | H = hide | T = toggle
             * @param {int} delay Delay in milliseconds
             * @see https://github.com/VFDouglas/javascript-toggle-visibility GitHub Repository
             */
            function toggleVisibility(element, type = 'T', delay = 0) {
                if (!element) {
                    console.error('The element should be a valid HTML element');
                    return false;
                }
                // Setting max transition values. Change it to your own preference.
                if (delay < 0) {
                    delay = 0;
                } else if (delay > 10000) {
                    delay = 10000;
                }

                /**
                 * Time which the interval will run
                 * @type {number}
                 */
                let intervalTime = 10;
                let amountLoops  = Math.ceil(delay / intervalTime);
                let doneLoops    = 0;

                /**
                 * Checks if the element is gonna be shown or hidden
                 */
                let showHide;
                if (type == 'H' || (type == 'T' && element.style.display != 'none')) {
                    showHide = 'H';
                } else if (type == 'T' || (type == 'T' && element.style.display == 'none')) {
                    showHide = 'S';

                    // Setting opacity to 0 to keep the animation fluid
                    element.style.opacity = '0';
                    // Brifly showing the element to capture the measures (width, height and opacity)
                    element.style.display = '';
                }

                let width   = +window.getComputedStyle(element, null).width.replace('px', '') || 0;
                let height  = +window.getComputedStyle(element, null).height.replace('px', '') || 0;
                let opacity = +window.getComputedStyle(element, null).opacity || 0;

                let widthPerLoop, heightPerLoop, opacityPerLoop;
                let newWidth, newHeight, newOpacity;

                // Calculating the amount of increase/decrease needed according to the amount of loops
                widthPerLoop   = width / amountLoops;
                heightPerLoop  = height / amountLoops;
                opacityPerLoop = 1 / amountLoops;

                const INTERVAL = setInterval(() => {
                    // When the animation is done, we need to remove the custom style attributes
                    if (doneLoops == amountLoops) {
                        element.style.width   = '';
                        element.style.height  = '';
                        element.style.opacity = '';
                        if (showHide == 'H') {
                            element.style.display = 'none';
                        } else {
                            element.style.display = '';
                        }
                        clearInterval(INTERVAL);
                        return false;
                    }

                    if (showHide == 'H') {
                        newWidth   = width - widthPerLoop * (doneLoops + 1);
                        newHeight  = height - heightPerLoop * (doneLoops + 1);
                        newOpacity = opacity - opacityPerLoop * (doneLoops + 1);
                    } else {
                        newWidth   = widthPerLoop * (doneLoops + 1);
                        newHeight  = heightPerLoop * (doneLoops + 1);
                        newOpacity = opacityPerLoop * (doneLoops + 1);
                    }

                    element.style.width   = `${Math.max(newWidth, 0)}px`;
                    element.style.height  = `${Math.max(newHeight, 0)}px`;
                    element.style.opacity = `${Math.max(newOpacity, 0)}`;

                    doneLoops++;
                }, intervalTime);
            }
        </script>
    </body>
</html>

Upvotes: 0

ABI
ABI

Reputation: 191

let redBox = document.getElementById('redBox');
let blueBox = document.getElementById('blueBox');
let [redButton, blueButton] = document.querySelectorAll('button'); //Destructuring 

redButton.addEventListener('click', () => {
    smoothDisplayNone(redBox);
});

blueButton.addEventListener('click', () => {
    smoothDisplayNone(blueBox);
});


//By using smoothDisplayNone() function, you can add this effect to whatever element you want.
function smoothDisplayNone(selectedElement){
    if(!selectedElement.classList.contains('animationDisplayNone')){
        selectedElement.classList.add('animationDisplayNone'); 
        selectedElement.classList.remove('animationDisplayBlock');
    }
    else{
        selectedElement.classList.remove('animationDisplayNone');
        selectedElement.classList.add('animationDisplayBlock'); 
    }
}
#redBox{
    width: 200px;
    height: 200px;
    background-color: red;
}

#blueBox{
    width: 200px;
    height: 200px;
    background-color: blue;
}

.animationDisplayNone{
    animation: smoothDisplayNone 0.5s linear forwards;
}

.animationDisplayBlock{
    animation: smoothDisplayBlock 0.5s linear forwards;
}

/*You should set the width and height according to the size of your element*/
@keyframes smoothDisplayBlock{
    0% { opacity: 0; width: 0px; height: 0px; }
    25% { opacity: 0.25; }
    50% { opacity: 0.50; }
    75% { opacity: 0.75; }
    100% { opacity: 1; width: 200px; height: 200px; }
}

@keyframes smoothDisplayNone {
    0% { opacity: 1; width: 200px; height: 200px; }
    25% { opacity: 0.75; }
    50% { opacity: 0.50; }
    75% { opacity: 0.25; }
    100% { opacity: 0; width: 0px; height: 0px; }
}
<div id="redBox"></div>
<div id="blueBox"></div>
<button type="button" style="margin-top:10px;">Red</button>
<button type="button" style="margin-top:10px;">Blue</button>

The code looks long at first glance but it is actually very simple to understand. I used the power of css animation to create a smooth effect. You can use smoothDisplayNone() function easily.

Upvotes: 0

RizkiDPrast
RizkiDPrast

Reputation: 1725

Hi I dont use display: block to display:none but changing the opacity, height and padding instead please review this one:

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 drawback for this approach is we have to keep tract of the div#hint height and change it using javascript if needed.

Upvotes: 8

skav3n
skav3n

Reputation: 180

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>

Upvotes: 1

arhak
arhak

Reputation: 2542

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>

Upvotes: 20

Aqueel Aboobacker VP
Aqueel Aboobacker VP

Reputation: 366

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 over display is better option

Upvotes: 4

Rajesh Patel
Rajesh Patel

Reputation: 2036

I have also tried to do this
please have a look if it 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;

  }

});

Upvotes: 0

AM Douglas
AM Douglas

Reputation: 1903

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

Upvotes: 29

vothaison
vothaison

Reputation: 1694

Without using css3 transition, you can use js setInterval to change some css property of the div, such as:

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

Then you have to change display: none to display: block; before you use setInterval to change other properties.

(I guess you know how to hide the div)

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

Upvotes: 3

Related Questions